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

# Notice

`Notice` is a component used to communicate feedback to the user.

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

## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string` | — | A CSS `class` to give to the wrapper element. |
| `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. |
| `spokenMessage` | `ReactNode` | `children` | Used to provide a custom spoken message in place of the `children` default. |
| `status` | `"info" \| "warning" \| "success" \| "error"` | `'info'` | Determines the color of the notice: `warning` (yellow), `success` (green), `error` (red), or `'info'`. By default `'info'` will be blue. |
| `onRemove` | `() => void` | `() => {}` | Function called when dismissing the notice |
| `politeness` | `"assertive" \| "polite"` | `getDefaultPoliteness( status )` | 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. |
| `isDismissible` | `boolean` | `true` | Whether the notice should be dismissible or not |
| `onDismiss` | `() => void` | `() => {}` | A deprecated alternative to `onRemove`. This prop is kept for compatibility reasons but should be avoided. |
| `actions` | `NoticeAction[]` | `[]` | 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. - `className`: `string` (optional) to add custom classes to the button styles. - `noDefaultClasses`: `boolean` (optional) A value of `true` will remove all    default styling. - `variant`: `'primary' \| 'secondary' \| 'link'` (optional) You can denote a    primary button action for a notice by passing a value of `primary`.<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. |
| `__unstableHTML` | `boolean` | — | Determines whether or not the message should be parsed as custom HTML instead of a string. |


## Examples

### Default

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

### With Custom Spoken Message

```tsx
const WithCustomSpokenMessage = ( props ) => {
	return <Notice { ...props } />;
};
```

### With JSX Children

```tsx
const WithJSXChildren = ( props ) => {
	return <Notice { ...props } />;
};
```

### With Actions

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

### NoticeList Subcomponent

```tsx
const NoticeListSubcomponent = () => {
	const exampleNotices: NoticeListProps[ 'notices' ] = [
		{
			id: 'second-notice',
			content: 'second notice content',
		},
		{
			id: 'first-notice',
			content: 'first notice content',
			actions: [
				{
					label: 'Click me!',
					onClick: () => {},
					variant: 'primary',
				},
				{
					label: 'Or click me instead!',
					onClick: () => {},
				},
				{
					label: 'Or visit a link for more info',
					url: 'https://wordpress.org',
					variant: 'link',
				},
			],
		},
	];
	const [ notices, setNotices ] = useState( exampleNotices );

	const removeNotice = (
		id: NoticeListProps[ 'notices' ][ number ][ 'id' ]
	) => {
		setNotices( notices.filter( ( notice ) => notice.id !== id ) );
	};

	const resetNotices = () => {
		setNotices( exampleNotices );
	};

	return (
		<>
			<NoticeList notices={ notices } onRemove={ removeNotice } />
			<Button
				__next40pxDefaultSize
				variant="primary"
				onClick={ resetNotices }
			>
				Reset Notices
			</Button>
		</>
	);
};
```

### With Disabled Action

Action buttons can be disabled.

```tsx
const WithDisabledAction = ( props ) => {
	return <Notice { ...props } />;
};
```