Notice – Automattic Design System

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

Import

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

Props

Name	Type	Default	Required	Description
`className`	`string`			A CSS `class` to give to the wrapper element.
`children`	`ReactNode`		Yes	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. @default `children`
`status`	`'warning' \| 'success' \| 'error' \| 'info'`	`'info'`		Determines the color of the notice: `warning` (yellow), `success` (green), `error` (red), or `'info'`. By default `'info'` will be blue, but if there is a parent Theme component with an accent color prop, the notice will take on that color instead. @default ‘info’
`onRemove`	`() => void`	`() => {}`		Function called when dismissing the notice @default noop
`politeness`	`'polite' \| 'assertive'`	`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. 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. @see https://www.w3.org/TR/wai-aria-1.1/#aria-live @default ‘assertive’ for ‘error’ status, ‘polite’ for all other statuses
`isDismissible`	`boolean`	`true`		Whether the notice should be dismissible or not @default true
`onDismiss`	`() => void`	`() => {}`		A deprecated alternative to `onRemove`. This prop is kept for compatibility reasons but should be avoided. @default noop
`actions`	`Array< NoticeAction >`	`[]`		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. `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`. 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. @default []
`__unstableHTML`	`boolean`			Determines whether or not the message should be parsed as custom HTML instead of a string.

Examples

Default

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

With Custom Spoken Message

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

With JSX Children

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

With Actions

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

NoticeList Subcomponent

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.

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