Components / data-display

Avatar Button

An avatar that is a button: the trigger of an account menu or a profile action.

import { AvatarButton } from '@basiiik/ui';

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

import { AvatarButton } from '@basiiik/ui';

<AvatarButton aria-label="Account menu" />

Example values were filled in for the required prop aria-label: replace them with your own.
Hover is CSS (a 2px ring); Focused is :focus-visible on the native button; Disabled uses the disabled attribute.
Compose with: avatar.
Storybook: Data display/Avatar button.

Props

Prop	Type	Notes
`size`	`"sm" \| "md" \| "lg" \| "xs" \| "xl"`	Default "md"
`aria-label` required	`string`
`name`	native attribute
`src`	`string`
`initials`	`string`
`icon`	`ReactNode`
`disabled`	native attribute

States. Hover is CSS (a 2px ring); Focused is :focus-visible on the native button; Disabled uses the disabled attribute.

Native attributes such as className, id and data-* are forwarded to the root element.

Use it when

The account menu trigger in a navbar or sidebar
An avatar that opens a profile or a switcher

Do not use it when

An avatar that only shows who someone is (use Avatar)
Changing the picture (use Avatar Upload)

Rules for agents

aria-label is required and says what pressing it does ("Account menu", "Open profile"), not the person's name
Pass name so the initials are derived; pass src for a photo
As the trigger of a DropdownMenu, pass it as trigger and let the menu add the aria attributes

Avoid

An Avatar with an onClick or inside a div with a click handler
Naming the button with the person's name only, which does not say what it does
A row of AvatarButtons for a list of people (use AvatarGroup)

Writing the content

aria-label: a verb phrase or the destination: "Account menu", "Open profile"

Keyboard

Tab focuses it
Enter and Space press it

Accessibility

A native <button type="button"> named by aria-label (what it does: "Account menu"); the avatar inside is hidden from assistive tech
For a menu, add aria-haspopup="menu" and aria-expanded, or use it as the trigger of a DropdownMenu

Colour tokens it reads

color.border.focuscolor.border.input-hover

data-display 20 Figma variants Try it in the live demo