Avatar
Also known as: Profile image, User icon
Preview
MD
Resources
Properties
| Property | Values | Default |
|---|---|---|
Variant Mode | Fill | Soft | Fill |
Content 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
Variants define the visual appearance of components and communicate the priority of the action or information they represent. Some common variants are provided out of the box (see the table below), but you can also create new variants to match your system's needs.
Variants are created and managed through variable modes in the design system tokens.
| Variant | When to use |
|---|---|
Fill | Used as a primary component style to display highest priority. Visually, it has high contrast compared to its surroundings. |
Soft | Used as a complimentary style, uses less contrasting fill color. |