Agriculture Design System
Beta
Design System for the Export Service

Global alert

Global alerts display prominent service or system wide messages at the top of the screen.

View in FigmaView in StorybookView in Github
import { ... } from '@ag.ds-next/react/global-alert';

Usage

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

For example:

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

Props

GlobalAlert Props
PropTypeDescription
children?ReactNode
onClose?MouseEventHandler<HTMLButtonElement>
Function to be called when the 'Close' button is pressed.
onDismiss?MouseEventHandler<HTMLButtonElement>
@deprecated use `onClose` instead
title?string
The title of the alert.
tone?"info" | "warning"Default: "warning"
The tone of the alert.

Source

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