Components / data-display
Avatar
Circular identity marker for a person or entity.
import { Avatar } 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 { Avatar } from '@basiiik/ui';
<Avatar />- Avatar has no interactive states. Type=Icon is the fallback when there is no name or image.
- Storybook: Data display/Avatar.
Props
| Prop | Type | Notes |
|---|---|---|
size | "sm" | "md" | "lg" | "xs" | "xl" | Default "md" |
name | string | |
initials | string | |
src | string | |
icon | ReactNode |
States. Avatar has no interactive states. Type=Icon is the fallback when there is no name or image.
Native attributes such as className, id and data-* are forwarded to the root element.
Use it when
- Identify a person or entity in lists, headers and comments
- An avatar that opens an account menu: Avatar Button
- A profile picture the person can change: Avatar Upload
Do not use it when
- Decorative imagery
Rules for agents
- Pass name; it becomes the accessible name and the source of the initials
- Pass src for a photo; it falls back to initials and then the icon if the image fails
- Set aria-hidden="true" when the name is shown as text right next to the Avatar, so it is not read twice
- Use initials only to override derived initials (1 to 2 characters)
- Use the same size for every Avatar in a list
- An avatar that opens a menu or a profile is an Avatar Button (AvatarButton), never an Avatar with an onClick
- A profile picture the person can change is an Avatar Upload (AvatarUpload): do not build a hidden file input and a button around an Avatar
Avoid
- An Avatar with no name, so it has no accessible name
- Decorative imagery in an Avatar
- Making an Avatar clickable without a button or link around it
- Mixing Avatar sizes in the same list
- A div or an Avatar with onClick used as a button
Accessibility
- alt or aria-label with the person's name
- aria-hidden when the name is shown next to it
Colour tokens it reads
color.bg.brand.subtlecolor.icon.brandcolor.text.brandRelated
data-display 10 Figma variants Try it in the live demo