Avatar
An avatar is a visual representation of a user or entity.
Figma Link
- Web Components
- Flutter
Demo
zeta-web v1.4.0
Web Components
Storybook
https://design.zebra.com/web/storybook/?path=/docs/components-avatar--docs
Slots
| Name | Description | Type |
|---|---|---|
| default | The content of the avatar. Should be an img element, a zeta-icon, or text. | text |
| status | The content of the status slot. Usually used for indicators or badges. | text |
Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| show-ring | Shows the ring around the avatar. | boolean | false |
| show-close | Shows the close icon. | boolean | false |
| size | The size of the avatar.Possible values:- xxxs: 24px- xxs: 32px- xs: 36px- s: 40px- m: 48px- l: 64px- xl: 80px- xxl: 120px- xxxl: 200pxDefault value: m | 'xxxs' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl' | undefined | undefined |
CSS Properties
| Name | Description |
|---|---|
| --avatar-color | The color of the avatar. Defaults to purple. Recommended colors: --avatar-blue, --avatar-green, --avatar-yellow, --avatar-orange, --avatar-purple, --avatar-pink, --avatar-teal |
| --avatar-initials-color | The color of the initials |
| --avatar-border-color | The color of the avatar border. |
Flutter component not available yet