In Page Banner
In page banners display an important, succinct message, and may provide actions for users to address. Banners should be displayed at the top of the screen,below a top app bar. Only one banner should be shown at a time.
Figma Link
- Web Components
- Flutter
Demo
zeta-web v1.4.0
Web Components
In page banners display an important, succinct message, and may provide actions for users to address. Banners should be displayed at the top of the screen, below a top app bar. Only one banner should be shown at a time.
This component represents a banner that can be displayed within a page. It can have a title, body content, and various status options.
Storybook
https://design.zebra.com/web/storybook/?path=/docs/components-in-page-banner--docs
Slots
| Name | Description | Type |
|---|---|---|
| default | The main content of the banner. | text |
| action | The action buttons. | text |
Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| title | Title of the banner, displayed at the top. | string | "" |
| status | Status of the component. | "default" | "info" | "positive" | "warning" | "negative" | "default" |
| canClose | Whether the banner can be closed by the user. | boolean | true |
| showIcon | Whether the icon should be displayed. | boolean | true |
| icon | Custom icon to replace default.Default icons are:- positive: check_circle- negative: error- warning: warning- info: info- default: info | ZetaIconName | 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 |
CSS Properties
| Name | Description |
|---|---|
| --banner-border-color | The border color of the banner. |
| --banner-background-color | The background color of the banner. |
| --banner-foreground-color | The foreground color of the banner. |
| --banner-icon-color | The icon color of the banner. |
| --banner-title-font | The font of the banner title. |
| --banner-body-font | The font of the banner body content. |
Flutter component not available yet