Edit this page

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.

Line lengths





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.

Infinite duration

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.

Placement

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.

Action button usage

Delete
Check
Delete Alt

API

SnackbarProvider API

children Node

Node

overrides object

Root One of
component nullable ComponentTypeany
props nullable One of
Object,
Object => Object
style nullable One of
Object,
Object => Object
,
ComponentTypeany
Content One of
component nullable ComponentTypeany
props nullable One of
Object,
Object => Object
style nullable One of
Object,
Object => Object
,
ComponentTypeany
StartEnhancerContainer One of
component nullable ComponentTypeany
props nullable One of
Object,
Object => Object
style nullable One of
Object,
Object => Object
,
ComponentTypeany
Spinner One of
component nullable ComponentTypeany
props nullable One of
Object,
Object => Object
style nullable One of
Object,
Object => Object
,
ComponentTypeany
Message One of
component nullable ComponentTypeany
props nullable One of
Object,
Object => Object
style nullable One of
Object,
Object => Object
,
ComponentTypeany
WrapActionButtonContainer One of
component nullable ComponentTypeany
props nullable One of
Object,
Object => Object
style nullable One of
Object,
Object => Object
,
ComponentTypeany
ActionButtonContainer One of
component nullable ComponentTypeany
props nullable One of
Object,
Object => Object
style nullable One of
Object,
Object => Object
,
ComponentTypeany
PlacementContainer One of
component nullable ComponentTypeany
props nullable One of
Object,
Object => Object
style 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 ComponentTypeany
props nullable One of
Object,
Object => Object
style nullable One of
Object,
Object => Object
,
ComponentTypeany
Content One of
component nullable ComponentTypeany
props nullable One of
Object,
Object => Object
style nullable One of
Object,
Object => Object
,
ComponentTypeany
StartEnhancerContainer One of
component nullable ComponentTypeany
props nullable One of
Object,
Object => Object
style nullable One of
Object,
Object => Object
,
ComponentTypeany
Spinner One of
component nullable ComponentTypeany
props nullable One of
Object,
Object => Object
style nullable One of
Object,
Object => Object
,
ComponentTypeany
Message One of
component nullable ComponentTypeany
props nullable One of
Object,
Object => Object
style nullable One of
Object,
Object => Object
,
ComponentTypeany
WrapActionButtonContainer One of
component nullable ComponentTypeany
props nullable One of
Object,
Object => Object
style nullable One of
Object,
Object => Object
,
ComponentTypeany
ActionButtonContainer One of
component nullable ComponentTypeany
props nullable One of
Object,
Object => Object
style 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

AbstractComponent
size number required

Snackbar exports

You can import this module like so:

import {DURATION} from 'baseui/snackbar'

It exports the following components or utility functions: