Loading navigation…
User
API and Development
Avatar represents people and entities across the product. It supports images and text fallback.
Name | Type | Default | Description |
|---|---|---|---|
|
| — | Alt text for the avatar image. First character is used as the fallback when no |
|
|
| Color variant for the fallback background. |
|
| — | Content displayed when the image fails to load or no |
|
| — | When true, applies inverted text color styling for use on dark backgrounds. |
|
|
| Controls the avatar dimensions. |
|
|
| When true, renders the avatar with rounded-square corners instead of a circle. |
|
| — | URL of the avatar image. |
Interactive examples and edge cases for this component are in Storybook.
Avatar supports three sizes for different layout needs—Small, Regular, and Large.
Use Small in compact layouts, such as lists or dense UIs.
Default is suitable for most contexts.
Use Large when the avatar is a focal point, such as profile views.
Color variants help convey emphasis or state.
Default is standard color for most use cases.
Use Accent for active, live, or otherwise emphasized avatars.
Choose a shape that matches the context.
The default shape, Cicle, is appropriate for people avatars.
Use Square for organizations or when a more structured look is desired.
Avatar adapts based on the data provided.
Image displays a profile image when src is provided.
The fallback feature automatically shows the first character of alt when no image is available.
Provide explicit fallback content for greater control.