UserProfile

Deprecated

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

Categorymolecules

Sourcepatterns/molecules/userprofile.html

AI HintUse for grouped UI patterns. Combine atoms into functional units.

Account profile.

UserProfile

Account & Admin — Family 8

Account profile.

Usage

Account profile. Refer to the DS component index for full prop details.

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

Props

Preview

UserProfile

Prop

Type

Required

Default

Description

name

string

Required

—

No description.

role

string

Required

—

No description.

initials

string

Required

—

No description.

Quick use:<UserProfile />

Accessibility

ARIA rolebutton (with aria-haspopup='menu')

Usage

Import

tsxSnippet

import { UserProfile } from "@epasslive/design-system"

Example 1

tsxSnippet

<UserProfile />

Example 2

tsxSnippet

<UserProfile variant="default" />

Anti-patterns

— Do not hardcode data in molecules

— Avoid complex business logic in molecules