Examples
Basic usage
Pass in the src property to apply an image for the avatar, or pass children for custom content such as icons or svg elements.
Color modifiers
Color modifiers add visual interest and automatically include a border. The available colors are: "red," "orangered," "orange," "yellow," "green," "teal," "blue," "purple," and "gray".
With initials
An avatar can display initials by using the initials property. It's recommended to pass only a single initial to ensure the text fits inside of the avatar.
Size variations
An avatar can be rendered at different sizes by passing the size property. The available sizes are: "sm," "md" (the default size), "lg," and "xl".
Props
Avatar
| Name | Type | Default | Description |
|---|---|---|---|
| altrequired | string | Specifies the alternate text of the image for the avatar. Will instead set the aria-label when using children or initials; to hide the avatar from assistive technologies when passing children or initials, pass an empty string to the alt prop. | |
| children | React.ReactNode | Content rendered inside the avatar, such as custom svgs or icons. | |
| className | string | Additional classes added to the avatar. | |
| color | 'red' | 'orangered' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'purple' | 'gray' | Color of the avatar. | |
| initials | string | Initials of the avatar. | |
| isBordered | boolean | Flag to indicate the avatar should have a border. | |
| size | 'sm' | 'md' | 'lg' | 'xl' | Size variant of avatar. | |
| src | string | '' | Specifies the URL of the image for the avatar. |
