System Banner
A banner displays an important, succinct message, and provides action for users to address. It draws the attention to the message by displaying it at the top in various colors.
Figma Link
- Web Components
- Flutter
Demo
zeta-web v1.4.0
Web Components
Storybook
https://design.zebra.com/web/storybook/?path=/docs/components-system-banner--docs
Slots
| Name | Description | Type |
|---|---|---|
| default | Text displayed on label. | text |
| leadingIcon | Icon at leading side of text. | zeta-icon |
| trailingIcon | Icon at trailing end of component. | zeta-icon |
Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| status | Type of banner. | "default" | "positive" | "warning" | "negative" | "default" |
| align | Alignment of banner. | "start" | "center" | "start" |
| text | Text displayed on the banner.Can also be slotted with default (unnamed) slot.If both are present, text prop will be displayed and slot will not | string | undefined | undefined |
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