Avatar
An avatar is a visual representation of a user or entity.
Figma Link
- Web Components
- Flutter
Demo
zeta-web v0.11.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 are "xxxs", "xxs", "xs", "s", "m", "l", "xl", "xxl", "xxxl". | 'xxxs' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl' | undefined | undefined |
CSS Properties
| Name | Description |
|---|---|
| --avatar-color | The color of the avatar |
| --avatar-initials-color | The color of the initials |
Demo
Widgetbook
https://design.zebra.com/flutter/widgetbook/index.html#/?path=components/avatar/zetaavatar/avatar
Inheritance
Object > DiagnosticableTree > Widget > StatelessWidget > ZetaStatelessWidget
Constructors
Constructor for ZetaAvatar
ZetaAvatar.new({Key? key, ZetaAvatarSize size = ZetaAvatarSize.xl, Widget? image, String? initials, Color? backgroundColor, Widget? lowerBadge, Widget? upperBadge, Color? borderColor, String? semanticLabel, String? semanticUpperBadgeLabel, String? semanticLowerBadgeLabel, TextStyle? initialTextStyle, String? label, TextStyle? labelTextStyle, int labelMaxLines = 1, VoidCallback? onTap})
Constructor for ZetaAvatar with initials from a full name.
ZetaAvatar.fromName({Key? key, required String name, ZetaAvatarSize size = ZetaAvatarSize.xl, Widget? lowerBadge, Widget? upperBadge, Color? borderColor, Color? backgroundColor, String? semanticLabel = 'avatar', String? semanticUpperBadgeLabel = 'upperBadge', String? semanticLowerBadgeLabel = 'lowerBadge', TextStyle? initialTextStyle, String? label, TextStyle? labelTextStyle, int labelMaxLines = 1, VoidCallback? onTap})
Constructor for ZetaAvatar with image.
ZetaAvatar.image({Key? key, ZetaAvatarSize size = ZetaAvatarSize.xl, Widget? image, Widget? lowerBadge, Widget? upperBadge, Color? borderColor, String? semanticLabel = 'avatar', String? semanticUpperBadgeLabel = 'upperBadge', String? semanticLowerBadgeLabel = 'lowerBadge', String? label, TextStyle? labelTextStyle, int labelMaxLines = 1, VoidCallback? onTap})
Constructor for ZetaAvatar with initials.
ZetaAvatar.initials({Key? key, required String? initials, ZetaAvatarSize size = ZetaAvatarSize.xl, Widget? lowerBadge, Widget? upperBadge, Color? borderColor, Color? backgroundColor, String? semanticLabel = 'avatar', String? semanticUpperBadgeLabel = 'upperBadge', String? semanticLowerBadgeLabel = 'lowerBadge', TextStyle? initialTextStyle, String? label, TextStyle? labelTextStyle, int labelMaxLines = 1, VoidCallback? onTap})
Properties
| Name | Description | Type | Features |
|---|---|---|---|
| backgroundColor | Background color. | Color? | final |
| borderColor | Shows border around the avatar | Color? | final |
| hashCode | The hash code for this object. | int | no setter inherited |
| image | Image to display for avatar. | Widget? | final |
| initials | String to display initials. | String? | final |
| initialTextStyle | Text style for initials. | TextStyle? | final |
| key | Controls how one widget replaces another widget in the tree. | Key? | final inherited |
| label | Label to display below the avatar. | String? | final |
| labelMaxLines | Maximum number of lines for label. | int | final |
| labelTextStyle | Text style for label. | TextStyle? | final |
| lowerBadge | Status badge shown at lower right corner of avatar. | Widget? | final |
| onTap | Callback when avatar is tapped. | VoidCallback? | final |
| rounded | Sets rounded or sharp border of the containing box and the icon style. | bool? | final inherited |
| runtimeType | A representation of the runtime type of the object. | Type | no setter inherited |
| semanticLabel | Value passed into wrapping Semantics widget. | String? | final |
| semanticLowerBadgeLabel | Value passed into wrapping Semantics widget for lower badge. | String? | final |
| semanticUpperBadgeLabel | Value passed into wrapping Semantics widget for upper badge. | String? | final |
| size | The size of the ZetaAvatar | ZetaAvatarSize | final |
| upperBadge | Notification Badge shown at top right corner of avatar. | Widget? | final |