Status Label
To help some information, labels, or errors stand out, we present them with badges. They can look like buttons, but users can’t select them. They just guide users to things they should pay attention to.
Figma Link
- Web Components
- Flutter
Demo
zeta-web v1.4.0
Web Components
Storybook
https://design.zebra.com/web/storybook/?path=/docs/components-badges--docs
Slots
| Name | Description | Type |
|---|---|---|
| default | Text displayed on label. | text |
Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| status | Type of status label. | "info" | "positive" | "warning" | "negative" | "neutral" | "neutral" |
| label | Text displayed on label.Can also be slotted. | string | undefined | undefined |
| icon | Icon leading the component. | ZetaIconName | undefined | undefined |
| showIcon | Whether to show the icon.If [icon] is undefined, an indicator circle will be rendered. | boolean | true |
Inherited Attributes
| Name | Description | Type | Default | Inherited From |
|---|---|---|---|---|
| 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 |
Flutter component not available yet