Automattic Design System

Notice

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

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

LinksPermalink to this section

View on Storybook

View source on GitHub

PropsPermalink to this section

Name	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`	`children`	`ReactNode` Used to provide a custom spoken message in place of the `children` default.
`status`	`'info'`	`"info" \| "warning" \| "success" \| "error"` 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`	`getDefaultPoliteness( status )`	`"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.
`isDismissible`	`true`	`boolean` 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: `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.
`__unstableHTML`		`boolean` Determines whether or not the message should be parsed as custom HTML instead of a string.

ExamplesPermalink to this section

DefaultPermalink to this section

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

With Custom Spoken MessagePermalink to this section

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

With JSX ChildrenPermalink to this section

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

With ActionsPermalink to this section

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

NoticeList SubcomponentPermalink to this section

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 ActionPermalink to this section

Action buttons can be disabled.

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