Components / Data display
Avatar
An image or initials with a stable colour and optional status dot.
@ruckc/truss-ui Data display
Import
import { Avatar } from '@ruckc/truss-ui';Playground
size
src
status
name
API
| Prop | Type | Default | Description |
|---|---|---|---|
name required | string | — | Display name (used for initials and the accessible name). |
src | string | — | Image URL. Falls back to initials if it fails to load. |
size | 'sm' | 'md' | 'lg' | 'md' | Control size: `sm` (24px), `md` (32px, default) or `lg` (40px). |
status | 'success' | 'warning' | 'danger' | 'neutral' | — | Presence dot: `success`, `warning`, `danger` or `neutral`. |