Automattic Design System

Snackbar

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.

import { Snackbar } from '@wordpress/components';

LinksPermalink to this section

View on Storybook

View source on GitHub

PropsPermalink to this section

Name	Default	Description
`children` Required		`ReactNode` The displayed message of a notice. Also used as the spoken message for assistive technology, unless `spokenMessage` is provided as an alternative message.
`className`		`string` A CSS `class` to give to the wrapper element.
`spokenMessage`	`children`	`ReactNode` Used to provide a custom spoken message in place of the `children` default.
`onRemove`	`noop`	`() => void` Function called when dismissing the notice
`politeness`	`'polite'`	`"assertive" \| "polite"` A politeness level for the notice’s spoken message. Should be provided as one of the valid options for an `aria-live` attribute value. 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. Note that this value should be considered a suggestion; assistive technologies may override it based on internal heuristics.
`onDismiss`	`noop`	`() => void` A deprecated alternative to `onRemove`. This prop is kept for compatibility reasons but should be avoided.
`icon`	`null`	`ReactNode` The icon to render in the snackbar.
`explicitDismiss`	`false`	`boolean` Whether to require user action to dismiss the snackbar. By default, this is dismissed on a timeout, without user interaction.
`listRef`		`MutableRefObject<HTMLDivElement \| null>` A ref to the list that contains the snackbar.
`actions`	`[]`	`(Pick<NoticeAction, "url" \| "label" \| "onClick"> & { openInNewTab?: boolean \| undefined; })[]` An array of action objects. Each member object should contain: `label`: `string` containing the text of the button/link `url`: `string` OR `onClick`: `( event: SyntheticEvent ) => void` to specify what the action does. The default appearance of an action button is inferred based on whether `url` or `onClick` are provided, rendering the button as a link if appropriate. If both props are provided, `url` takes precedence, and the action button will render as an anchor tag.
`as`		`JSXElementConstructor<any> \| keyof IntrinsicElements \| undefined` The HTML element or React component to render the component as.

ExamplesPermalink to this section

DefaultPermalink to this section

const Default = ( {
	children,
	...props
} ) => {
	return <Snackbar { ...props }>{ children }</Snackbar>;
};

With ActionsPermalink to this section

const WithActions = ( {
	children,
	...props
} ) => {
	return <Snackbar { ...props }>{ children }</Snackbar>;
};

With IconPermalink to this section

const WithIcon = ( {
	children,
	...props
} ) => {
	return <Snackbar { ...props }>{ children }</Snackbar>;
};

With Explicit DismissPermalink to this section

const WithExplicitDismiss = ( {
	children,
	...props
} ) => {
	return <Snackbar { ...props }>{ children }</Snackbar>;
};

With Action And Explicit DismissPermalink to this section

const WithActionAndExplicitDismiss = ( {
	children,
	...props
} ) => {
	return <Snackbar { ...props }>{ children }</Snackbar>;
};