Status

Account

Who is signed in: an avatar, the name and one detail line.

Preview

Live, in this page’s themeOpen on its own

Props

Prop	Type	Description
`layout`	`'row' \| 'card'`	card: a contained block with the photo on top and the name and workspace under it (the foot of the side navigation).
`name`Required	`string`
`shortName`	`string`
`detail`	`React.ReactNode`
`src`	`string`
`tone`	`AvatarProps['tone']`
`href`	`string`
`collapsed`	`boolean`	Avatar only, for a collapsed side navigation; the name stays for screen readers and shows as a tooltip.
`menu`	`AccountMenuGroup[]`	Makes the card a button that opens a menu above it: workspaces to switch to, then actions like Profile and Sign out. Replaces `href`.
`menuLabel`	`string`	Names the menu for screen readers. Default "Account and workspaces".
`className`	`string`

Guidelines

Who is signed in: an avatar, the name and one detail line.

In the app, use AccountMenu and WorkspaceSwitcher instead. Since 3.4 the side navigation no longer ends in an Account card: the workspace you are in is a WorkspaceSwitcher at the top of the side navigation, and you (Profile, Settings, Sign out) are an AccountMenu at the top right of every page. Account stays for lists of people and for previews.

Provide: name (full name, for the avatar's initials and label), shortName (what to show, usually the first name), detail (the studio or business name), and href to link to Profile.

One per screen, at the bottom of the side navigation above a divider. On phones, the Profile tab takes its place.
The avatar uses the bold tone unless there is a photo.

collapsed shows the avatar only, for a collapsed side navigation. The name stays for screen readers and as a tooltip.

layout: card is the profile in its own container: the photo on top (44px), then the name and the workspace. It sits at the foot of the side navigation, above Collapse sidebar.

The card is tinted with the color theme (accent-subtle), the photo has a ring in accent-visual, and the workspace line is accent-content, so it changes with the theme and still holds 4.5:1.

menu turns the card into a button that opens a menu above it, in glass like the rest of the navigation layer. Use it for what belongs to the person, not the page:

Workspaces (group label "Workspaces"): every workspace they belong to, with their role as the detail ("Owner", "Manager"). The current one is selected and shows a check and bold text. Then "New workspace" (add).
Actions, no label: Profile (user), then Sign out (lock, negative).

A chooser icon (switch-vertical) sits in the card's corner so it reads as something you can open.
Keyboard: Enter, Space or the arrow keys open it; arrows move, Home and End jump, Enter chooses, Escape closes and returns focus to the card, Tab closes. Workspaces are menuitemradio with aria-checked.
Switching workspace reloads from Home, so no page is left showing something from the other workspace.
On phones there is no side navigation: the same choices live on the Profile page.