Snackbar Edit
Use Snackbars to communicate low priority, non-interruptive messages to the user.
Table of contents Table of contents
Design guidelines Design guidelines
A Snackbar displays a succinct message that is cleared out after a small delay. It can also offer the user options, like viewing a published post but these options should also be available elsewhere in the UI.
Development guidelines Development guidelines
Usage Usage
To display a plain snackbar, pass the message as a children
prop:
const MySnackbarNotice = () => ( <Snackbar>Post published successfully.</Snackbar> );
For more complex markup, you can pass any JSX element:
const MySnackbarNotice = () => ( <Snackbar> <p> An error occurred: <code>{ errorDetails }</code>. </p> </Snackbar> );
Props Props
The following props are used to control the display of the component.
children
: (string) The displayed message of a notice. Also used as the spoken message for assistive technology, unlessspokenMessage
is provided as an alternative message.spokenMessage
: (string) Used to provide a custom spoken message in place of thechildren
default.politeness
: (string) A politeness level for the notice’s spoken message. Should be provided as one of the valid options for anaria-live
attribute value. Defaults to"polite"
. Note that this value should be considered a suggestion; assistive technologies may override it based on internal heuristics.- A value of
'assertive'
is to be used for important, and usually time-sensitive, information. It will interrupt anything else the screen reader is announcing in that moment. - A value of
'polite'
is to be used for advisory information. It should not interrupt what the screen reader is announcing in that moment (the “speech queue”) or interrupt the current task.
- A value of
onRemove
: function called when dismissing the notice.actions
: (array) an array of action objects. Each member object should contain alabel
and either aurl
link string oronClick
callback function.
Related components Related components
- To create a prominent message that requires a higher-level of attention, use a Notice.