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 usecase fort his button include: canceling, undoing, retrying, or linking to releated content. Avoid using the button to dismiss the snackbar since it will timeout on it's own.
API
SnackbarProvider API
children Node
Nodeoverrides object
Root One of component nullable ComponentTypeanyprops nullable One of Object, Object => Objectstyle nullable One of Object, Object => Object, ComponentTypeanyContent One of component nullable ComponentTypeanyprops nullable One of Object, Object => Objectstyle nullable One of Object, Object => Object, ComponentTypeanyStartEnhancerContainer One of component nullable ComponentTypeanyprops nullable One of Object, Object => Objectstyle nullable One of Object, Object => Object, ComponentTypeanySpinner One of component nullable ComponentTypeanyprops nullable One of Object, Object => Objectstyle nullable One of Object, Object => Object, ComponentTypeanyMessage One of component nullable ComponentTypeanyprops nullable One of Object, Object => Objectstyle nullable One of Object, Object => Object, ComponentTypeanyWrapActionButtonContainer One of component nullable ComponentTypeanyprops nullable One of Object, Object => Objectstyle nullable One of Object, Object => Object, ComponentTypeanyActionButtonContainer One of component nullable ComponentTypeanyprops nullable One of Object, Object => Objectstyle nullable One of Object, Object => Object, ComponentTypeanyPlacementContainer One of component nullable ComponentTypeanyprops nullable One of Object, Object => Objectstyle nullable One of Object, Object => Object, ComponentTypeanyplacement union
location on page where snackbar will render
One of topLeft, top, topRight, bottomLeft, bottom, bottomRightdefaultDuration union
default display duration
One of infinite, short, medium, longSnackbarElement API
actionMessage string
message displayed in button
actionOnClick function
function executed on button click
SyntheticEventHTMLButtonElement => mixedfocus boolean
if action button preset focus it, defaults to true
message string required
primary message displayed in snackbar
overrides object
Root One of component nullable ComponentTypeanyprops nullable One of Object, Object => Objectstyle nullable One of Object, Object => Object, ComponentTypeanyContent One of component nullable ComponentTypeanyprops nullable One of Object, Object => Objectstyle nullable One of Object, Object => Object, ComponentTypeanyStartEnhancerContainer One of component nullable ComponentTypeanyprops nullable One of Object, Object => Objectstyle nullable One of Object, Object => Object, ComponentTypeanySpinner One of component nullable ComponentTypeanyprops nullable One of Object, Object => Objectstyle nullable One of Object, Object => Object, ComponentTypeanyMessage One of component nullable ComponentTypeanyprops nullable One of Object, Object => Objectstyle nullable One of Object, Object => Object, ComponentTypeanyWrapActionButtonContainer One of component nullable ComponentTypeanyprops nullable One of Object, Object => Objectstyle nullable One of Object, Object => Object, ComponentTypeanyActionButtonContainer One of component nullable ComponentTypeanyprops nullable One of Object, Object => Objectstyle nullable One of Object, Object => Object, ComponentTypeanyprogress boolean
renders spinner in start enhancer position
startEnhancer AbstractComponent<object>
renders element as message prefix, takes precedence over progress prop
AbstractComponentsize number required Snackbar exports
You can import this module like so:
import {DURATION} from 'baseui/snackbar'
It exports the following components or utility functions: