--- describes: Avatar --- The avatar component can be used to display a user's avatar. When an image src is not supplied the user's initials will display. Instead of the initials, an SVG icon can be displayed with the `renderIcon` property. **Note: If both `src` and `renderIcon` are provided, the image (`src`) takes priority.** The avatar can be `circle` _(default)_ or `rectangle`. The component uses flexbox layout and can be displayed as `inline` _(default)_ or `block` using the `display` prop. ```js --- type: example readonly: true ---
``` ### AI Avatar There is a need for special, `ai avatars`. These have a specific look. You can achieve it the following way ```js --- type: example readonly: true --- ``` ### Using Lucide Icons Lucide icons in Avatar are automatically sized and colored according to the Avatar's `size` and `color` props, so manual adjustments are not needed on the icon itself. ```js --- type: example ---
} /> } /> } /> } /> } /> } />
``` ### Size The `size` prop allows you to select from `xx-small`, `x-small`, `small`, `medium` _(default)_, `large`, `x-large`, and `xx-large`. Each size has predefined dimensions and typography scales. ```js --- type: example ---
``` ### Colors The color of the initials and icons can be set with the `color` prop, and it allows you to select from `accent1` _(default)_, `accent2`, `accent3`, `accent4`, `accent5`, `accent6`, and `ai` _(for AI avatars with gradient background)_. ```js --- type: example ---
``` The `hasInverseColor` prop inverts the background color and the text/icon color. Inverted Avatars have **no border**. ```js --- type: example ---
``` In case you need more control over the color, feel free to use the `themeOverride` prop, and override the default theme variables. ```js --- type: example ---
``` ### Display The `display` prop controls whether the avatar is displayed as `inline` _(default)_ or `block`. This affects the CSS display property and layout behavior. ```js --- type: example ---
Inline avatars: are displayed inline with text.
Block avatars: stack vertically.
``` ### Border By default only avatars without an image have borders but you can force it to `always` or `never` show with the `showBorder` prop however you should only use it rarely in very specific occasions (e.g. displaying an avatar in the [SideNavBar](/#SideNavBar)) ```js --- type: example ---
``` ### Priority and Behavior When both `src` and `renderIcon` props are provided, the **image (`src`) takes priority** and will be displayed instead of the icon. The icon will only be shown as a fallback while the image is loading or if the image fails to load. ```js --- type: example ---
Image takes priority over icon
``` ### Accessibility Avatars use the `aria-hidden="true"` property and therefore are hidden from screenreaders. Make sure if you are using them stand-alone it's accompanied with [ScreenReaderContent](ScreenReaderContent). ### Guidelines ```js --- type: embed ---
Ensure the appropriate size is being used for its placement (in a table, stand-alone, etc…) Use circle variant in Canvas
Use inline in sentence
```