--- 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. The avatar can be `circle` _(default)_ or `rectangle`. Use the `margin` prop to add space between Avatar and other content. ```js --- type: example readonly: true ---
} margin="0 space8 0 0" /> } shape="rectangle" />
``` ### 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 --- ``` ### Size The `size` prop allows you to select from `xx-small`, `x-small`, `small`, `medium`, `large`, `x-large`, and `xx-large`. If the `auto` prop is set, the avatar size will adjust according to the font-size of its container. ```js --- type: example ---
} size="xx-small" margin="0 space8 0 0" /> } size="x-small" margin="0 space8 0 0" /> } size="small" margin="0 space8 0 0" /> } size="medium" margin="0 space8 0 0" /> } size="large" margin="0 space8 0 0" /> } size="x-large" margin="0 space8 0 0" /> } size="xx-large" />
``` ### Colors The color of the initials and icons can be set with the `color` prop, and it allows you to select from `default`, `shamrock`, `barney`, `crimson`, `fire`, `licorice` and `ash`. ```js --- type: example ---
} name="Arthur C. Clarke" margin="0 space8 0 0" /> } name="James Arias" color="shamrock" margin="0 space8 0 0" /> } name="Charles Kimball" color="barney" margin="0 space8 0 0" /> } name="Melissa Reed" color="crimson" margin="0 space8 0 0" /> } name="Heather Wheeler" color="fire" margin="0 space8 0 0" /> } name="David Herbert" color="licorice" margin="0 space8 0 0" /> } name="Isaac Asimov" color="ash" />
``` The `hasInverseColor` prop inverts the background color and the text/icon color. Inverted Avatars have **no border**. ```js --- type: example ---
} name="Arthur C. Clarke" hasInverseColor margin="0 space8 0 0" /> } name="James Arias" color="shamrock" hasInverseColor margin="0 space8 0 0" /> } name="Charles Kimball" color="barney" hasInverseColor margin="0 space8 0 0" /> } name="Melissa Reed" color="crimson" hasInverseColor margin="0 space8 0 0" /> } name="Heather Wheeler" color="fire" hasInverseColor margin="0 space8 0 0" /> } name="David Herbert" color="licorice" hasInverseColor margin="0 space8 0 0" /> } name="Isaac Asimov" color="ash" hasInverseColor />
``` 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 ---
} themeOverride={{ color: '#efb410' }} margin="0 space8 0 0" /> } hasInverseColor themeOverride={{ color: 'lightblue', background: 'black' }} margin="0 space8 0 0" />
``` ### 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 ---
} margin="0 space8 0 0" showBorder="never"/>
``` ### 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
```