Components
Avatar
Avatar displays an image, initials, or icon for a person, entity, or profile.
React
Unable to parse html
const Preview = () => ( <Avatar aria-label='Ola Nordmann' variant='circle' /> ); render(<Preview />)
- aria-label
- Type
string
- data-tooltip
- Type
string
- aria-hidden
- Type
Booleanish
- variant
- Description
The shape of the avatar.
- Type
"circle" | "square"- Default
circle
- initials
- Description
Initials to display inside the avatar.
- Type
string
- asChild
- Description
Change the default rendered element for the one passed as a child, merging their props and behavior.
- Type
boolean- Default
false
- children
- Description
Image, icon or initials to display inside the avatar. Gets `aria-hidden="true"`
- Type
ReactNode
| Name | Type | Default | Description |
|---|---|---|---|
| aria-label | string | - | - |
| data-tooltip | string | - | - |
| aria-hidden | Booleanish | - | - |
| variant | "circle" | "square" | circle | The shape of the avatar. |
| initials | string | - | Initials to display inside the avatar. |
| asChild | boolean | false | Change the default rendered element for the one passed as a child, merging their props and behavior. |
| children | ReactNode | - | Image, icon or initials to display inside the avatar. Gets `aria-hidden="true"` |
Usage
Examples
Default Icon
If you do not send any children, Avatar will display a default user icon.
This can be overridden in CSS with the --dsc-avatar-icon-url variable. See list of CSS variables at the bottom of the page.
React
Unable to parse html
const NoName = () => { return <Avatar aria-label='Ola' />; }; render(<NoName />)
Sizes
The component is controlled by data-size, and will inherit size from the closest parent with data-size set.
In addition to sm, md and lg, Avatar also supports the xs size.
React
Unable to parse html
const Sizes = () => ( <> <Avatar data-size='xs' aria-label='extra small' initials='xs' /> <Avatar data-size='sm' aria-label='small' initials='sm' /> <Avatar data-size='md' aria-label='medium' initials='md' /> <Avatar data-size='lg' aria-label='large' initials='lg' /> </> ); render(<Sizes />)
Colors
All colors in your theme are valid, and the component will inherit the closest data-color.
React
Unable to parse html
const ColorVariants = () => { const colors = ['neutral', 'accent', 'brand1', 'brand2', 'brand3']; return ( <> {colors.map((color) => ( <Avatar key={color} data-color={color as AvatarProps['data-color']} aria-label={`color ${color}`} /> ))} </> ); }; render(<ColorVariants />)
Variants
The variant prop can be set to square or circle. circle is the default.
React
Unable to parse html
const ShapeVariants = () => ( <> <Avatar variant='circle' aria-label='variant circle' /> <Avatar variant='square' aria-label='variant square' /> <Avatar variant='circle' aria-label='Ola Nordmann'> ON </Avatar> <Avatar variant='square' aria-label='Ola Nordmann'> ON </Avatar> </> ); render(<ShapeVariants />)
With image or icon
If you add images or icons as children, they will automatically get aria-hidden="true" to avoid duplicate information.
You must set aria-label on Avatar yourself to explain who or what the avatar represents.
React
Unable to parse html
const WithImageAndIcon = () => ( <> <Avatar aria-label='Ola Nordmann'> <img src='/img/component-docs/cats/cat1.webp' alt='' /> </Avatar> <Avatar aria-label='Ola Nordmann'> <BriefcaseIcon /> </Avatar> </> ); render(<WithImageAndIcon />)
Composition
The component should be able to be composed into other components.
Here is an example of using Avatar inside a Dropdown component.
React
Unable to parse html
const InDropdown = () => ( <Dropdown.TriggerContext> <Dropdown.Trigger variant='tertiary'> <Avatar aria-hidden='true' data-size='sm'> ON </Avatar> Ola Nordmann </Dropdown.Trigger> <Dropdown placement='bottom-end' autoPlacement={false} data-size='md'> <Dropdown.List> <Dropdown.Item> <Dropdown.Button> <Badge.Position overlap='circle'> <Badge data-color='danger' data-size='sm'></Badge> <Avatar aria-hidden='true' data-size='xs'> ON </Avatar> </Badge.Position> Ola Nordmann </Dropdown.Button> </Dropdown.Item> <Dropdown.Item> <Dropdown.Button> <Avatar aria-hidden='true' data-size='xs'> <BriefcaseIcon /> </Avatar> Sogndal kommune </Dropdown.Button> </Dropdown.Item> </Dropdown.List> </Dropdown> </Dropdown.TriggerContext> ); render(<InDropdown />)
HTML
Avatar uses the class name ds-avatar on a <span> with role="img".