You are viewing a PR preview for PR #1506

Agriculture Design System
Beta
Design System for the Export Service

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.

View in FigmaView in StorybookView in Github
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';

Props

SectionAlert Props
PropTypeDescription
titlestringThe title of the alert.
tone"success" | "error" | "warning"The tone of the alert.
children?ReactNodeThe content of the alert description.
id?stringThe ID of the alert.
onDismiss?MouseEventHandler<HTMLButtonElement>Function to be called when the 'Close' button is pressed.
ref?Ref<HTMLDivElement>
role?AriaRoleThe role of the alert.
tabIndex?numberThe tab index of the alert.

Source

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