---
name: Snackbar
package: '@wordpress/components'
category: '@wordpress-components'
status: stable
canonical: 'https://system.automattic.design/components/snackbar/'
storybook: 'https://wordpress.github.io/gutenberg/?path=/docs/components-snackbar--docs'
github: 'https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/snackbar'
figma: 'https://www.figma.com/design/jMgzw8IhsMC4gpMbMko4lv/WPDS--Gutenberg-22.3-?node-id=2274-38166'
---

# 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.

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

## Props

| Name | Type | 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` | `ReactNode` | `children` | Used to provide a custom spoken message in place of the `children` default. |
| `onRemove` | `() => void` | `noop` | Function called when dismissing the notice |
| `politeness` | `"assertive" \| "polite"` | `'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.<br>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.<br>Note that this value should be considered a suggestion; assistive technologies may override it based on internal heuristics. |
| `onDismiss` | `() => void` | `noop` | A deprecated alternative to `onRemove`. This prop is kept for compatibility reasons but should be avoided. |
| `icon` | `ReactNode` | `null` | The icon to render in the snackbar. |
| `explicitDismiss` | `boolean` | `false` | 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:<br>- `label`: `string` containing the text of the button/link - `url`: `string` OR `onClick`: `( event: SyntheticEvent ) => void` to specify    what the action does.<br>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. |


## Examples

### Default

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

### With Actions

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

### With Icon

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

### With Explicit Dismiss

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

### With Action And Explicit Dismiss

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