Skip to main content

In Page Banner

Demo

zeta-web v0.9.0
Web Components

Zeta in page banner component.

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 text, and various status options.

Storybook

https://design.zebra.com/web/storybook/?path=/docs/components-in-page-banner--docs

Slots

NameDescriptionType
defaultThe main content of the banner.text
actionThe action buttons.text

Attributes

NameDescriptionTypeDefault
titleTitle of the banner, displayed at the top.string""
statusStatus of the component."default" | "info" | "positive" | "warning" | "negative""default"

Inherited Attributes

NameDescriptionTypeDefaultInherited From
roundedWhether 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 | undefinedtrueContourable

Figma

https://www.figma.com/design/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=22799-99928