SnackBar
Snackbars provide brief messages about app processes at the bottom of the screen.
Figma Link
- Web Components
- Flutter
Demo
zeta-web v0.11.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 |
| 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 |
Demo
Widgetbook
Inheritance
Object > DiagnosticableTree > Widget > StatefulWidget > SnackBar
Constructors
Sets basic styles for the SnackBar.
ZetaSnackBar.new({Key? key, SnackBarBehavior? behavior = SnackBarBehavior.floating, EdgeInsetsGeometry? margin, required BuildContext context, required Widget content, VoidCallback? onPressed, ZetaSnackBarType? type, Widget? leadingIcon, bool? rounded, String? actionLabel, String? actionSemanticLabel})
Properties
| Name | Description | Type | Features |
|---|---|---|---|
| action | (optional) An action that the user can take based on the snack bar. | SnackBarAction? | final inherited |
| actionOverflowThreshold | (optional) The percentage threshold for action widget's width before it overflows | double? | final inherited |
| animation | The animation driving the entrance and exit of the snack bar. | Animation<double>? | final inherited |
| backgroundColor | The snack bar's background color. | Color? | final inherited |
| behavior | This defines the behavior and location of the snack bar. | SnackBarBehavior? | final inherited |
| clipBehavior | The content will be clipped (or not) according to this option. | Clip | final inherited |
| closeIconColor | An optional color for the close icon, if showCloseIcon is | Color? | final inherited |
| content | The primary content of the snack bar. | Widget | final inherited |
| dismissDirection | The direction in which the SnackBar can be dismissed. | DismissDirection? | final inherited |
| duration | The amount of time the snack bar should be displayed. | Duration | final inherited |
| elevation | The z-coordinate at which to place the snack bar. This controls the size | double? | final inherited |
| hashCode | The hash code for this object. | int | no setter inherited |
| hitTestBehavior | Defines how the snack bar area, including margin, will behave during hit testing. | HitTestBehavior? | final inherited |
| key | Controls how one widget replaces another widget in the tree. | Key? | final inherited |
| margin | Empty space to surround the snack bar. | EdgeInsetsGeometry? | final inherited |
| onVisible | Called the first time that the snackbar is visible within a Scaffold. | VoidCallback? | final inherited |
| padding | The amount of padding to apply to the snack bar's content and optional | EdgeInsetsGeometry? | final inherited |
| runtimeType | A representation of the runtime type of the object. | Type | no setter inherited |
| shape | The shape of the snack bar's Material. | ShapeBorder? | final inherited |
| showCloseIcon | (optional) Whether to include a "close" icon widget. | bool? | final inherited |
| width | The width of the snack bar. | double? | final inherited |