Data Display
Avatar
A small round image for a person or thing. It falls back to initials, and a small dot can show presence such as online.
ReactVueWeb Components
View in Storybook Playground
Examples
<Avatar name="Ada Lovelace" src="/ada.jpg" status="success" statusLabel="online" />
<Avatar name="Grace Hopper" /> // initials "GH"Props
| Name | Type | Default | Description |
|---|---|---|---|
src | string | — | Image URL. When set, shows the photo; otherwise initials/children render. |
name | string | — | Display name — provides the accessible label and derives the initials. |
alt | string | — | Alternative accessible name when `name` is not the photo subject. |
size | AvatarSize | md | Size token. @default 'md' |
square | boolean | false | Rounded-square instead of a circle. @default false |
status | AvatarStatus | — | Presence dot. |
statusLabel | string | — | Text describing the status dot, so the meaning is not color-only. |
imgProps | ImgHTMLAttributes<HTMLImageElement> | — | Extra props forwarded to the inner `<img>`. |
children | ReactNode | — |
Accessibility
- Body/background contrast is ≥ 7:1 (AAA) in both light and dark.
- Every interaction works with the keyboard alone.
- The focus ring is always visible.
- Respects prefers-reduced-motion and stops excessive motion.
Every component is designed to meet WCAG 2.1 AAA.