Avatar displays an image, icon, or custom content inside a geometric mask with optional status indicator. Supports many shapes via boolean props or a shape string prop. Automatically adjusts foreground color for contrast based on the background color prop, ensuring content remains visible regardless of background.
The Avatar components include the following:
Renders content (image, icon, initials, etc.) inside a shaped mask. You can control the background color, mask shape, and optionally show an online status indicator. The component automatically computes a contrasting foreground color for accessibility and legibility.
| Avatar Props | Type | Description |
|---|---|---|
presence | string | Shows a status indicator based on one of the following prop names: |
| Â Â Â online | boolean | If true, displays the avatar as online. |
| Â Â Â offline | boolean | If true, displays the avatar as offline. |
backgroundColor | string | Sets the background color of the avatar as a CSS color (not a class utility). The component automatically computes a contrasting foreground text color for content legibility. |
maskClasses | string | Additional classes to apply to the mask element. |
shape | string | Sets the shape of the avatar mask. Equivalent to setting one of the below boolean props. |
| Â Â Â squircle | boolean | Sets shape to "squircle" |
| Â Â Â heart | boolean | Sets shape to "heart" |
| Â Â Â hexagon | boolean | Sets shape to "hexagon" |
| Â Â Â hexagon2 | boolean | Sets shape to "hexagon-2" |
| Â Â Â decagon | boolean | Sets shape to "decagon" |
| Â Â Â pentagon | boolean | Sets shape to "pentagon" |
| Â Â Â diamond | boolean | Sets shape to "diamond" |
| Â Â Â square | boolean | Sets shape to "square" |
| Â Â Â circle | boolean | Sets shape to "circle" |
| Â Â Â star | boolean | Sets shape to "star" |
| Â Â Â star2 | boolean | Sets shape to "star-2" |
| Â Â Â triangle | boolean | Sets shape to "triangle" |
| Â Â Â triangle2 | boolean | Sets shape to "triangle-2" |
| Â Â Â triangle3 | boolean | Sets shape to "triangle-3" |
| Â Â Â triangle4 | boolean | Sets shape to "triangle-4" |
| Â Â Â half1 | boolean | Sets shape to "half-1" |
| Â Â Â half2 | boolean | Sets shape to "half-2" |
| Avatar Slots | Description |
|---|---|
default | The default slot. Content to be masked and displayed inside the avatar (image, icon, initials, etc.). |
Groups multiple Avatar components together in a horizontal or vertical layout. Useful for displaying teams, user lists, or overlapping avatars.
| AvatarGroup Props | Type | Description |
|---|---|---|
orientation | string | Sets the layout direction of the group. Accepts |
| Â Â Â horizontal | boolean | If true, arranges avatars in a horizontal row. Overrides |
| Â Â Â vertical | boolean | If true, arranges avatars in a vertical column. Overrides |
| AvatarGroup Slots | Description |
|---|---|
default | The default slot. Place your Avatar components here to group them visually. |
Showcases all available mask shapes. Use the shape prop or boolean mask props to change the avatar shape.
Demonstrates a ring around the avatar using mask shapes. Useful for status or focus indication.
Displays a layered ring effect around the avatar.
Shows how to use fallback content (like initials or icons) when no image is provided.
Demonstrates online/offline status indicators with the online and offline props. You can also use the presence prop to set the status to either online or offline.
A simple ring effect around the avatar, without additional mask layers.
Combines ring and mask shape for advanced avatar styling.
Showcases different avatar sizes.