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.
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.