Skip to main content

Empty State

Empty states are used to convey there is no data is available for display. Types include No results, First use, No Data, User Cleared.

https://www.figma.com/design/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS-Zeta---Components?node-id=38470-1055&m=dev

Demo

zeta-web v0.11.0
Web Components

Storybook

https://design.zebra.com/web/storybook/?path=/docs/components-empty-state--docs

Slots

NameDescriptionType
primaryActionPrimary Action Button. Should be a zeta-button.text
secondaryActionSecondary Action Button. Should be a zeta-button.text
illustrationIllustration to be displayed in the empty state. Should be a zeta-illustration.text

Attributes

NameDescriptionTypeDefault
titleTitle of the empty statestringundefined
descriptionDescription of the empty statestringundefined

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