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.
Figma Link
- Web Components
- Flutter
Demo
zeta-web v0.12.1
Web Components
Storybook
https://design.zebra.com/web/storybook/?path=/docs/components-empty-state--docs
Slots
| Name | Description | Type |
|---|---|---|
| primaryAction | Primary Action Button. Should be a zeta-button. | text |
| secondaryAction | Secondary Action Button. Should be a zeta-button. | text |
| illustration | Illustration to be displayed in the empty state. Should be a zeta-illustration. | text |
Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| title | Title of the empty state | string | undefined |
| description | Description of the empty state | string | 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
Inheritance
Object > DiagnosticableTree > Widget > StatelessWidget
Constructors
Constructs a ZetaEmptyState.
ZetaEmptyState.new({Key? key, required String title, required String description, Widget? illustration, Widget? primaryAction, Widget? secondaryAction})
Properties
| Name | Description | Type | Features |
|---|---|---|---|
| description | Subtitle of the empty state, providing additional context or instructions. | String | final |
| hashCode | The hash code for this object. | int | no setter inherited |
| illustration | Illustration widget for the empty state, which can be a custom widget or an image. | Widget? | final |
| key | Controls how one widget replaces another widget in the tree. | Key? | final inherited |
| primaryAction | Primary action button for the empty state, typically used to guide the user to take an action. | Widget? | final |
| runtimeType | A representation of the runtime type of the object. | Type | no setter inherited |
| secondaryAction | Secondary action button for the empty state, providing an alternative action. | Widget? | final |
| title | Title of the empty state, typically a short message indicating the state of the content. | String | final |