# code-snippets/3.9.6/js/components/common/DismissableNotice.tsx

Code Snippets, version 3.9.6. 23 lines.

- Page: https://pluginprobe.com/plugins/code-snippets/3.9.6/code/js/components/common/DismissableNotice.tsx
- Raw: https://pluginprobe.com/plugins/code-snippets/3.9.6/raw/js/components/common/DismissableNotice.tsx
- Modified: 2025-08-29T08:54:36+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/3.9.6/code/js/components/common/DismissableNotice.tsx#L10-L20`.

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

export interface DismissibleNoticeProps {
	className?: classnames.Argument
	onDismiss: VoidFunction
	children?: ReactNode
}

export const DismissibleNotice: React.FC<DismissibleNoticeProps> = ({ className, onDismiss, children }) =>
	<div id="message" className={classnames('notice fade is-dismissible', className)}>
		<>{children}</>

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

```