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
Node
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, ComponentTypeanyPlacementContainer One of component nullable ComponentTypeanyprops nullable One of Object, Object => Objectstyle nullable One of Object, Object => Object, ComponentTypeany
placement
union
location on page where snackbar will render
One of topLeft, top, topRight, bottomLeft, bottom, bottomRight
defaultDuration
union
default display duration
One of infinite, short, medium, long
SnackbarElement API
actionMessage
string
message displayed in button
actionOnClick
function
function executed on button click
SyntheticEventHTMLButtonElement => mixed
focus
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, ComponentTypeany
progress
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: