SnackBar
Snackbars provide brief messages about app processes at the bottom of the screen.
Figma Link
- Web Components
- Flutter
Demo
zeta-web v1.4.0
Web Components
Contextual snackbars provide brief messages in relation to an action that has been taken by the user.
Storybook
https://design.zebra.com/web/storybook/index.html?path=/docs/components-snackbar--docs
Slots
| Name | Description | Type |
|---|---|---|
| default | The text of the snackbar. | text |
| icon | The icon of the snackbar. | text |
Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| status | Status of the component. | "default" | "positive" | "info" | "warning" | "negative" | "view" | "default" |
| hasCloseAction | Whether the snackbar has a close action. | boolean | false |
| actionLabel | Label of the action. | string | undefined | undefined |
| closeActionIcon | Icon used for the close icon.Will default to 'cancel' icon if not provided. | ZetaIconName | undefined | undefined |
| actionClick | Function to call when the action is clicked. | Function | () => {} |
Inherited Attributes
| Name | Description | Type | Default | Inherited From |
|---|---|---|---|---|
| shape | Whether the component is sharp, rounded or fully rounded.This will change the border radius and icon font.Possible values are: - sharp: No border radius, uses "zeta-icons-sharp"- rounded: Minimal border radius, uses "zeta-icons-round"- full: Full border radius, uses "zeta-icons-round" | 'sharp' | 'rounded' | 'full' | "rounded" | ContourableThree |
| disabled | Boolean for if component is disabled.This will apply disabled styles. | boolean | false | Interactive |
| tabIndex | The tab index of the component, used to determine the order in which elements receive focus when the user navigates through the document by pressing the Tab key. | number | 0 | Interactive |
Flutter component not available yet