Components
Avatar
Avatar displays an image, initials, or icon for a person, entity, or profile.
HTML
Unable to parse html
const Preview = () => ( <Avatar aria-label='Ola Nordmann' variant='circle' /> ); render(<Preview />)
Usage
Avatar uses the class name ds-avatar on a <span> with role="img".Ensure the avatar has an accessible name.
CSS variables and data attributes
Sizes are controlled with data-size and colors with data-color. The component will inherit from the closest parent where these are set.
| Name | Value |
|---|---|
| data-initials | |
| data-variant | square |
| Name | Value |
|---|---|
| --dsc-avatar-icon-url | url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M8.25 7.5a3.75 3.75 0 1 1 7.5 0 3.75 3.75 0 0 1-7.5 0M12 2.25a5.25 5.25 0 1 0 0 10.5 5.25 5.25 0 0 0 0-10.5M8.288 17.288A5.25 5.25 0 0 1 17.25 21a.75.75 0 0 0 1.5 0 6.75 6.75 0 0 0-13.5 0 .75.75 0 0 0 1.5 0 5.25 5.25 0 0 1 1.538-3.712' clip-rule='evenodd'/%3E%3C/svg%3E") |
| --dsc-avatar-background | var(--ds-color-base-default) |
| --dsc-avatar-color | var(--ds-color-base-contrast-default) |
| --dsc-avatar-size | 2.625em |
| --dsc-avatar-padding | 0.45em |
| --dsc-avatar-font-size | 1.3em |
Example
Variants
The variant prop can be set to square or circle. circle is the default.
HTML
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
Avatar displays a user icon by default, but this can be overridden in CSS using the --dsc-avatar-icon-url variable.
If you add an image or icon as content inside the avatar, make sure to set aria-hidden="true" to avoid duplicate information. You must add an aria-label to the avatar yourself to explain who or what the avatar represents.
HTML
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 />)
React
- 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"` |
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 />)
Non-text content
If you add anything other than text as a child inside <Avatar> (like an image or icon), it will automatically receive aria-hidden="true" to avoid duplicate information.