Status Badge
Status badges used to show more information on an Avatar.
Figma Link
https://www.figma.com/design/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=20816-3661
- Web Components
- Flutter
Demo
zeta-web v0.12.1
Web Components
Indicators are used to show the status of a user or any messages/notifications they might have.
Storybook
https://design.zebra.com/web/storybook/?path=/docs/components-badges--docs
Slots
| Name | Description | Type |
|---|---|---|
| default | Value to be displayed inside the indicator. If the type is set to notification, this should be the number or text shown inside the indicator. If the type is set to icon, this should be an icon or any other content you want to display. There is first class support for the zeta-icon component, which can be used to display icons inside the indicator. | text |
Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| icon | Icon to be shown on icon type indicator.Full list of icons can be found at https://design.zebra.com/icons Zeta Icons. | ZetaIconName | undefined | undefined |
| type | Whether to render as a notification or icon indicator. | "icon" | "notification" | "notification" |
| value | Value to be displayed inside the indicator.The value should not be negative.If the value is above 99, it will be displayed as "99+".The value will determine the size of the indicator when the type is set to "notification".If the value is above 99, the size will be set to "large".If the value is a number, it will be displayed as a number.s | number | undefined | undefined |
Inherited Attributes
| Name | Description | Type | Default | Inherited From |
|---|---|---|---|---|
| size | Size of component | SizeType | "medium" | Size |
| rounded | Whether the component is rounded or sharp.When true, rounded will set the border radius of the first child, and any children with class 'contourable-target' to --radius-minimal.Otherwise, this value will be --radius-none. | boolean | undefined | true | Contourable |
Demo
Badge component used with ZetaAvatar as either ZetaAvatar.upperBadge or ZetaAvatar.lowerBadge.
Inheritance
Object > DiagnosticableTree > Widget > StatelessWidget
Constructors
Constructor for ZetaAvatarBadge
ZetaAvatarBadge.new({Key? key, Color? color, ZetaAvatarBadgeType type = ZetaAvatarBadgeType.notification, IconData? icon, int? value, Color? iconColor})
Constructs ZetaAvatarBadge with icon
ZetaAvatarBadge.icon({Key? key, Color? color, IconData? icon = ZetaIcons.star, Color? iconColor, ZetaAvatarSize size = ZetaAvatarSize.xxxl})
Constructs ZetaAvatarBadge with notifications
ZetaAvatarBadge.notification({Key? key, int? value})
Properties
| Name | Description | Type | Features |
|---|---|---|---|
| color | Background color for badge | Color? | final |
| hashCode | The hash code for this object. | int | no setter inherited |
| icon | Icon of badge | IconData? | final |
| iconColor | Icon color for badge | Color? | final |
| key | Controls how one widget replaces another widget in the tree. | Key? | final inherited |
| runtimeType | A representation of the runtime type of the object. | Type | no setter inherited |
| size | Size of badge | ZetaAvatarSize | final |
| type | Type of badge | ZetaAvatarBadgeType | final |
| value | Notification value for badge | int? | final |