# code-snippets/4.0.0-beta.1/js/components/common/Notice.tsx

Code Snippets, version 4.0.0-beta.1. 34 lines.

- Page: https://pluginprobe.com/plugins/code-snippets/4.0.0-beta.1/code/js/components/common/Notice.tsx
- Raw: https://pluginprobe.com/plugins/code-snippets/4.0.0-beta.1/raw/js/components/common/Notice.tsx
- Modified: 2026-06-19T15:58:00+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/code-snippets/4.0.0-beta.1/code/js/components/common/Notice.tsx#L10-L20`.

```tsx
import { __ } from '@wordpress/i18n'
import classnames from 'classnames'
import React from 'react'
import type { HTMLAttributes, ReactNode } from 'react'

export type NoticeType = 'info' | 'warning' | 'error' | 'success'

export interface NoticeProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
	className?: classnames.Argument
	children?: ReactNode
	type?: NoticeType
}

export const Notice: React.FC<NoticeProps> = ({ className, type, children, ...props }) =>
	<div className={classnames('notice', { [`notice-${type}`]: type }, className)} {...props}>
		{children}
	</div>

export interface DismissibleNoticeProps extends NoticeProps {
	onDismiss: VoidFunction
}

export const DismissibleNotice: React.FC<DismissibleNoticeProps> = ({ className, onDismiss, children, ...noticeProps }) =>
	<Notice className={classnames('is-dismissible', className)} {...noticeProps}>
		{children}

		<button type="button" className="notice-dismiss" onClick={event => {
			event.preventDefault()
			onDismiss()
		}}>
			<span className="screen-reader-text">{__('Dismiss notice.', 'code-snippets')}</span>
		</button>
	</Notice>

```