Section alert

Section alerts are non-disruptive notifications that provide Success, Error and Warning messages about a state change in a section of a page.

import { ... } from '@ag.ds-next/react/section-alert';

Usage

Section alert components can be imported via the section-alert entrypoint in the @ag.ds-next/react package.

For example:

import { ... } from '@ag.ds-next/react/section-alert';

SectionAlert Props
Prop	Type	Description
title	string	The title of the alert.
tone	"success" \| "error" \| "warning"	The tone of the alert.
children?	ReactNode	The content of the alert description.
focusOnMount?	boolean	Whether the alert should be focused as soon as it's rendered.
focusOnUpdate?	string \| number \| readonly unknown[]	Focus the alert when a value in this array updates.
id?	string	The ID of the alert.
onClose?	MouseEventHandler<HTMLButtonElement>	Function to be called when the 'Close' button is pressed.
onDismiss?	MouseEventHandler<HTMLButtonElement>	@deprecated use `onClose` instead
ref?	Ref<HTMLDivElement>
role?	AriaRole	The role of the alert.
tabIndex?	number	The tab index of the alert.

You can view the full source code for this package on Github.