UserProfile

molecules

Header user profile — 40px avatar + name (13px/600) + role (11px muted) + chevron dropdown indicator. Renders as <button> with aria-haspopup='menu' and aria-expanded.

ARIA Role: button (with aria-haspopup='menu')

Demo

Demo for UserProfile (molecules)

Header user profile — 40px avatar + name (13px/600) + role (11px muted) + chevron dropdown indicator. Renders as <button> with aria-haspopup='menu' and aria-expanded.

Props

PropTypeRequiredDefaultDescription
namestringYes—
rolestringYes—
initialsstringYes—

TypeScript Interface

interface UserProfileProps {
  name: string;
  role: string;
  initials: string;
  isOpen?: boolean;
  onToggle: () => void;
  menuId?: string;
}

Assertions (NASA Rule 5)

  • [type]name, role, initials, onToggle all required(NASA Rule 5)
  • [aria]Button must have aria-haspopup='menu' and aria-expanded matching isOpen prop(WCAG 4.1.2)

Usage

Import

import { Userprofile } from '@epasslive/design-system'

Basic

<Userprofile />

With Variants

<Userprofile variant="primary" size="md" />