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 v0.11.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 |
Demo
Widgetbook
Inheritance
Object > DiagnosticableTree > Widget > StatefulWidget > MaterialBanner
Constructors
Constructor for ZetaSystemBanner. See MaterialBanner for more information.
ZetaSystemBanner.new({Key? key, required BuildContext context, required String title, IconData? leadingIcon, ZetaSystemBannerStatus type = ZetaSystemBannerStatus.primary, bool titleCenter = false, Widget? trailing, bool? rounded, String? semanticLabel})
Properties
| Name | Description | Type | Features |
|---|---|---|---|
| actions | The set of actions that are displayed at the bottom or trailing side of | List<Widget> | final inherited |
| animation | The animation driving the entrance and exit of the material banner when presented by the ScaffoldMessenger. | Animation<double>? | final inherited |
| backgroundColor | The color of the surface of this MaterialBanner. | Color? | final inherited |
| content | The content of the MaterialBanner. | Widget | final inherited |
| contentTextStyle | Style for the text in the content of the MaterialBanner. | TextStyle? | final inherited |
| dividerColor | The color of the divider. | Color? | final inherited |
| elevation | The z-coordinate at which to place the material banner. | double? | final inherited |
| forceActionsBelow | An override to force the actions to be below the content regardless of | bool | final inherited |
| hashCode | The hash code for this object. | int | no setter inherited |
| key | Controls how one widget replaces another widget in the tree. | Key? | final inherited |
| leading | The (optional) leading widget of the MaterialBanner. | Widget? | final inherited |
| leadingPadding | The amount of space by which to inset the leading widget. | EdgeInsetsGeometry? | final inherited |
| margin | Empty space to surround the MaterialBanner. | EdgeInsetsGeometry? | final inherited |
| minActionBarHeight | The optional minimum action bar height. | double | final inherited |
| onVisible | Called the first time that the material banner is visible within a Scaffold when presented by the ScaffoldMessenger. | VoidCallback? | final inherited |
| overflowAlignment | The horizontal alignment of the actions when the actions laid out in a column. | OverflowBarAlignment | final inherited |
| padding | The amount of space by which to inset the content. | EdgeInsetsGeometry? | final inherited |
| runtimeType | A representation of the runtime type of the object. | Type | no setter inherited |
| shadowColor | The color of the shadow below the MaterialBanner. | Color? | final inherited |
| surfaceTintColor | The color used as an overlay on backgroundColor to indicate elevation. | Color? | final inherited |