Default
default.tsx
<Avatar name="Davin Chiupka" />Avatar
The Avatar component is used to display a user's profile image, initials, or custom content with support for status indicators.
Usage & Examples
Props API
32 props
Columns
Default | Description | ||||
|---|---|---|---|---|---|
alt | string | No | props | — | 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" | No | aria | — | 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 | No | aria | — | References the element(s) that describe the avatar with additional context. Useful for status, activity, or profile details. |
aria-label | string | No | aria | — | Explicit accessible name for the interactive avatar element. Overrides inferred labels such as label, alt, or name. |
aria-labelledby | string | No | aria | — | References the element(s) that label the avatar. Should take precedence over aria-label when provided. |
children | ReactNode | No | props | — | Custom child elements (replaces avatar content entirely). |
className | string | No | styling | — | Custom class names for the avatar container. |
data-testid | string | No | testing | — | Backward-compatible alias for test ID attributes. |
disabled | boolean | No | props | false | Disables interaction and styles as disabled. |
fallback | ReactNode | No | props | — | Custom fallback content (overrides initials). |
glass | boolean | No | props | configured default glass setting (fallback: false) | Applies a translucent frosted-glass treatment using the active theme palette. |
href | string | No | props | — | If provided, avatar becomes a link (internal or external). |