User Profile
Last Updated: September 2026User profiles pair an avatar with a name and optional subtitle for lists, headers, and assignee rows.
Source CodeAnatomy
link- 1Avatar
- 2Name
- 3Subtitle
Variants
linkDefault
Required name with optional subtitle and initials.
Without subtitle
Name-only layout when role or meta is unnecessary.
With image
Pass imageUrl (and label for alt) like Avatar.
Icon fallback
Omit label and imageUrl for the person icon fallback.
Sizes
linkUser profiles support 4 sizes: XS, S, M, and L (xs hides the subtitle).
Usage Guidelines
linkWhen to use
- •To show a person with their name (and optional subtitle) in lists or headers.
- •In sidebars, comments, assignee rows, and account menus.
- •When Avatar alone does not provide enough context.
When not to use
- •For avatar-only dense tables — use Avatar.
- •For groups of people without names — use AvatarGroup.
- •As a navigation control by itself — wrap with a link or Menu trigger.
Keep Avatar label to 1–2 initials; put the full name in name.
Don't put the display name in label — it overflows the circle.
At size xs, put essential context in name — subtitle is not shown.
Don't put critical info only in subtitle if you use size xs.
Behaviors
linkRequired props
- •name is required.
- •All Avatar props (size, label, imageUrl, …) are forwarded to the leading Avatar.
Subtitle
- •subtitle is optional.
- •When size === "xs", subtitle is never rendered even if provided.
Typography
- •Name uses label-xs / label-s / label-m based on size.
- •Subtitle always uses supportive tertiary color when visible.
Content Guidelines
linkNames
- •Use synthetic demo names only (no real patient or clinician PHI).
- •Prefer first + last for name; keep subtitle to role or team.
Subtitles
- •Keep subtitles short (role, team, or status) — one line.
- •Avoid packing MRNs, emails, or phone numbers into subtitle.
Accessibility
linkText & Labels
- •Visible name provides the primary accessible identity.
- •Pass label with imageUrl so the Avatar photo has meaningful alt text.
ARIA attributes
- •UserProfile is a non-interactive div layout by default.
- •When used as a Menu trigger or link, put the interactive role on the wrapper.
Keyboard Support
- •Not focusable unless wrapped (e.g. Menu trigger, button, or link).
- •Pair with Button or Menu when the row must be activatable.
WCAG Compliance Standards
FAQs
linkIs name required?
Yes. UserProfile always expects a name string for the primary text line.
Why does subtitle disappear at xs?
At size xs the layout is intentionally compact — subtitle is suppressed so only the name remains beside the small avatar.
UserProfile vs Avatar?
Avatar is face-only. UserProfile composes Avatar with required name and optional subtitle for list and header rows.