Components
Avatar
Avatar displays an image, initials, or icon for a person, entity, or profile.
Press Enter to start editing
Unable to parse html
const Preview = () => <Avatar aria-label='Ola Nordmann' />; render(<Preview />)
Use avatar when
- representing a person or an entity
Avoid avatar when
- representing anything other than a person or an entity, such as a document. Use icons or other visual symbols instead
- it is used purely for decoration without function or meaning
Examples
Sizes
In addition to sm, md and lg, avatar also supports the xs size.
Press Enter to start editing
Unable to parse html
const Sizes = () => ( <> <Avatar data-size='xs' aria-label='extra small'> xs </Avatar> <Avatar data-size='sm' aria-label='small'> sm </Avatar> <Avatar data-size='md' aria-label='medium'> md </Avatar> <Avatar data-size='lg' aria-label='large'> lg </Avatar> </> ); render(<Sizes />)
Colours
Avatar is available in all colours in your theme.
Press Enter to start editing
Unable to parse html
const ColorVariants = () => { const colors = ['neutral', 'accent']; return ( <> {colors.map((color) => ( <Avatar key={color} data-color={color as AvatarProps['data-color']} aria-label={`color ${color}`} /> ))} </> ); }; render(<ColorVariants />)
Variants
Avatar radius can be changed, but choose one consistent version throughout your solution.
Press Enter to start editing
Unable to parse html
const Radius = () => ( <> <Avatar aria-label='radius default' /> <Avatar aria-label='radius 1rem' style={ { '--dsc-avatar-radius': '1rem', } as React.CSSProperties } /> <Avatar aria-label='radius lg' style={ { '--dsc-avatar-radius': 'var(--ds-border-radius-lg)', } as React.CSSProperties } > ON </Avatar> <Avatar aria-label='radius none' style={ { '--dsc-avatar-radius': '0', } as React.CSSProperties } > ON </Avatar> </> ); render(<Radius />)
Guidelines
Avatar should help make the user interface more recognisable and easier to navigate without distracting or taking up unnecessary space.
- Use the same avatar shape consistently throughout the solution.
- The avatar should usually be combined with text, unless it is entirely clear who or what it represents.
- Only use an avatar when it actually adds value to the user experience, for example to show who authored something or who is responsible.
Text
Avatar should not contain text inside the component, except when using initials. Other text, such as full names, roles or organisations, should be placed outside the avatar to ensure good readability.
Edit this page on github.com (opens in a new tab)