Snackbar
A Snackbar is a message used to give users feedback after taking an action. They are ephemeral and time out after a few seconds.
Use Snackbars when you need a quick, lightweight way of providing feedback following an action they've taken. They're great for confirming an event happened or the user did something successfully. They allow a user to continue their tasks with minimal interruption. Think of them like a real life subtle nod of the head to acknowledge an action taken.
Snackbars can be queued up easily by using the useSnackbar hook. Calling the enqueue function
will display the snackbar and subsequent calls will the snackbar in line to display once the earlier
one is finished displaying.
Examples
A snackbar will render at most three lines before truncating the text. Depending on the line count, it's recommended to change the display duration so that users can fully read the text before exiting. By default, it will choose the shortest duration.
In some circumstances, you will want to not auto-hide the snackbar and wait until a task
completes. The example below shows DURATION.inifinite usage, how to manually dequeue a
snackbar, as well as demonstrates the progress flag that will render a spinner element.
Snackbar elements can be positioned in various places on the page, but defaults to the
top-center. Snackbars should be placed in a consistent location throughout the application.
To facilitate consistent placement, this is only configurable from the SnackbarProvider.
Snackbars can also offer the ability to perform a single action. Appropriate use case fort his button include: canceling, undoing, retrying, or linking to related content. Avoid using the button to dismiss the snackbar since it will time out on its own.
Snackbar exports
You can import this module like so:
import {DURATION} from 'baseui/snackbar'
It exports the following components or utility functions: