Avatar

logo retains the original 30px Argus mark, nine-pixel corners, action-to-ring gradient, 14px extra-bold initial, and selection-colored drop shadow.

Each name resolves to one of ten hues through a stable hash, so the same person gets the same disc in every session and on every platform, and a list of people spreads across the set. The hue follows name when one is set, else the initials, so pass the full name: two people who share initials then usually get different discs.

Four steps: tiny (20px), small (28px), the default 40px row avatar, and large (56px). The initials take 38% of the disc (11, 15 and 21px), and 10px on tiny, the kit's smallest type. rounded squares the disc with corners at 28% of its size. small is the disc AvatarMenu builds its capsule around, so a standalone small avatar and the one inside a pill are the same circle. Precedence when several are passed: tiny beats small beats large.

A lone avatar as the account trigger: the Dropdown makes the disc its press target, so tapping it opens the account menu, no email or chevron needed.

account preserves the original Argus 32px orchid disc, glow, name and role metrics, and compact menu. triggerLabel names the one press target; menuLabel independently names its menu. Bounds use menuWidth and maxHeight.

Built on Dropdown, so in glass mode the menu is Dropdown's dense-layer glass card under the capsule, which keeps its place, its press and its accessible name throughout.

The whole account control in one component. AvatarMenu renders a single capsule trigger (the avatar in the viewer's violet glow ring, the name over the muted email, a chevron) and the account menu itself, with name and email repeated as the menu's own identity header. One press target covers the capsule, so nothing beside it has to be wired up. The capsule is the hand-off's identity pill on every platform: a hairline edge round the popover fill at rest, the accent fill under the pointer and while its menu is open; the menu is each platform's own Dropdown.

compact drops the name block for a bar with no room for it, leaving the 28px avatar alone. The identity still travels with the menu, so the name and email head the rows the moment it opens. A topbar parks the pill at the trailing edge, so the menu hangs from that edge by default; alignStart moves it to the leading edge for a pill that sits at the start of a bar.

The menu hangs from the pill's trailing edge by default, the edge a topbar parks the account control against and the only one a right-parked trigger can open from without running off the surface. alignStart swings it to the leading edge for a pill that sits at the start of a bar, and alignEnd spells the default out. Both are logical, so a right-to-left locale mirrors them. Press each pill to see which edge its menu meets.

disabled takes the whole pill out of service: it dims to the platform's disabled treatment, the press is a no-op, the menu never opens, and the button announces itself disabled before anyone reaches for it. Reach for it while the session is still resolving, not to park a menu whose rows simply have nothing to offer.

Frame

Image or initials

Ring

Roles

ARIA on web