Avatar
An avatar is a visual representation of a user or entity.
Install
One package and one stylesheet. The stylesheet carries the tokens every component reads.
pnpm add @wolf-rayet/reactimport '@wolf-rayet/react/css/wolf-rayet.css';
import { Avatar } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| name * | string | — | The person or entity. It becomes the image description and the initials when there is no image, so it is required. |
| src | string | — | The image. Without one the avatar falls back to initials taken from the name. |
| size | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'medium' | Match it to the density. Small in a table row, larger on a profile. |
| appearance | 'circle' | 'square' | 'circle' | Circle for a person, square for a team, a project or anything that is not a human being. |
| presence | 'online' | 'busy' | 'focus' | 'offline' | — | A status dot. Only use it where presence is genuinely known and genuinely useful. |
| isDisabled | boolean | — | Dims the avatar for an account that is deactivated. |
Accessibility
What the component does for you, and what it needs from you.
- The name is the image description, which is why it is required rather than optional.
- Presence is a coloured dot, so whatever it says has to be available in words nearby.
- An avatar on its own is not a control. If it opens something, the thing around it is the button and carries the name.