Avatar
The Avatar component is used to display a user's profile image, initials, or custom content with support for status indicators.
Usage
Default
<Avatar name="Davin Chiupka" />Props
| Type | Description | |
|---|---|---|
| alt | string | Alternative text for the avatar image. Used as the image alt text and may also contribute to the accessible name. |
| aria-current | boolean | "page" | "step" | "location" | "date" | "time" | Indicates the current state or item within a set when the avatar acts as a link. Example: page, step, location, date, time, true. |
| aria-describedby | string | References the element(s) that describe the avatar with additional context. Useful for status, activity, or profile details. |
| aria-label | string | Explicit accessible name for the interactive avatar element. Overrides inferred labels such as label, alt, or name. |
| aria-labelledby | string | References the element(s) that label the avatar. Should take precedence over aria-label when provided. |
| children | ReactNode | Custom child elements (replaces avatar content entirely). |
| className | string | Custom class names for the avatar container. |
| data-testid | string | Optional test ID for testing frameworks. |
| disabled | boolean | Disables interaction and styles as disabled. |
| fallback | ReactNode | Custom fallback content (overrides initials). |
| href | string | If provided, avatar becomes a link (internal or external). |
| label | string | Visible or semantic label for the avatar. Used as a fallback accessible name when aria-label / aria-labelledby are not provided. |
| name | string | Full name used to generate initials when no image is available. |
| onClick | ((e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void) | Click handler (used only when not a link). |
| outline | boolean | Whether to apply an outline style. |
| priority | boolean | If true, the image loads with higher priority. |
| role | AriaRole | Optional role override for custom avatar rendering patterns. In most cases this should be left undefined so the native button/link role is preserved. |
| shadow | ShadowType | Shadow of the avatar ('none' | 'light' | 'medium' | 'strong' | 'intense'). |
| shape | ShapeType | Shape of the avatar border ('circle' | 'square' | 'rounded'). |
| size | SizeType | Size of the avatar ('xs' | 'small' | 'medium' | 'large' | 'xl'). |
| src | string | Optional image URL for avatar display. |
| state | StateType | State of the avatar ('success' | 'error' | 'warning'). |
| status | StatusType | Optional status indicator for user availability and activity. Useful for chat apps, collaboration tools, or profile displays. |
| statusIcon | ReactNode | Custom icon to replace the default status dot. |
| statusLabel | string | Optional accessible label for the status indicator. Example: "Online", "Busy", or "In a meeting". Helpful when the status conveys important information not otherwise described nearby. |
| statusPosition | StatusPositionType | Position of the status indicator dot/icon ('topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'). |
| theme | ThemeType | Visual theme of the avatar ('primary', 'secondary', 'tertiary', 'quaternary', 'clear'). |