Avatar
Also known as: Profile image, User icon
Resources
Properties
| Property | Values | Default |
|---|---|---|
Variant Variant | Initials | Picture | Icon | Icon |
Size Variant | Xs | Sm | Md | Lg | Xl | 2Xl | Md |
Initials Text | string | DS |
Icon InstanceSwap | Any icon | user |
Best practises
- Use avatars to visually represent users, accounts or entities.
- Use a recognizable image, initials or icon to represent entities.
- Provide fallback content for the image or initials.
Variants
Some common variants are already created and ready to use (see the table), but you have the possibility to add new variants or customize every visual aspect through tokens and token modes.
| Variant | Fill | Soft | Outline |
|---|
Size
Dimensions of the avatar are tied to the global scale tokens. This ensures that the components with similar size settings remain consistent across the interface. scale tokens also provides more granular control over dimensional settings.
scale.css
--scale-width-<size>
--scale-height-<size>
--scale-radius-<size>
--scale-icon-size-<size>
--scale-text-size-<size>
--scale-text-height-<size>