You are viewing a PR preview for PR #1506

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
onDismiss?MouseEventHandler<HTMLButtonElement>Function to be called when the 'Close' button is pressed.
title?stringThe 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.