Komponenter
Avatar
Avatar viser et bilde, initialer eller ikon for en person, enhet eller profil.
HTML
Unable to parse html
const Preview = () => ( <Avatar aria-label='Ola Nordmann' variant='circle' /> ); render(<Preview />)
Bruk
Avatar bruker klassenavnet ds-avatar på en <span> med role="img". Sørg for at avatar har tilgjengelig navn.
CSS variabler og data-attributter
Størrelser styres med data-size og farger med data-color. Komponenten vil arve nærmeste forelder med disse satt.
| Navn | Verdi |
|---|---|
| data-initials | |
| data-variant | square |
| Navn | Verdi |
|---|---|
| --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 |
Eksempel
Varianter
variant prop kan settes til square eller circle. circle er standard.
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 />)
Med bilde eller ikon
Avatar viser som standard et brukerikon, men dette kan overstyres i CSS med variabelen --dsc-avatar-icon-url.
Dersom du legger bilder eller ikon som barn må du sørge for å sette aria-hidden="true" for å unngå dobbel informasjon. Du må selv sette aria-label på avatar for å forklare hvem eller hva avataren representerer.
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"` |
Komponering
Komponenten skal kunne komponeres inn i andre komponenter.
Her er et eksempel på bruk av avatar inne i en Dropdown-komponent.
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 />)
Ikke tekstlig innhold
Dersom du legger inn noe annet enn tekst som barn i <Avatar> (som for eksempel et bilde eller ikon), vil disse få aria-hidden="true" automatisk for å unngå dobbel informasjon.