Skip to main content

Top App Bar

Top app bars provide content and actions related to the current screen.

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

Demo

zeta-web v0.11.0
Web Components

Storybook

https://design.zebra.com/web/storybook/?path=/docs/components-top-appbar--docs

Slots

NameDescriptionType
defaultThe content of the appbar.text
leadingThe content to be placed at the start of the appbar.text
trailingThe content to be placed at the end of the appbar.text

Attributes

NameDescriptionTypeDefault
centeredCenters the content of the title.booleanfalse
extendedPlaces the title below the main appbar.booleanfalse