Page alert
Page alerts are colour-coded, non-disruptive notifications that provide Success, Error, Warning or Information messages at relevant times during the user journey. They should not be confused with Callouts.
import { ... } from '@ag.ds-next/react/page-alert';Usage
Page alert components can be imported via the page-alert entrypoint in the @ag.ds-next/react package.
For example:
import { ... } from '@ag.ds-next/react/page-alert';Props
| Prop | Type | Description |
|---|---|---|
| tone | "info" | "success" | "error" | "warning" | The tone of the alert. |
| children? | ReactNode | |
| focusOnMount? | boolean | Whether the alert should be focused as soon as it's rendered. |
| focusOnUpdate? | string | 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 WAI-ARIA role. |
| tabIndex? | number | Tab index order. |
| title? | ReactNode | The title of the alert. |
| Prop | Type | Description |
|---|---|---|
| as? | "h1" | "h2" | "h3" | "h4" | "h5" | "h6"Default: "h2" | |
| children? | ReactNode | |
| hasCloseButton? | boolean | |
| hasDismissButton? | boolean | @deprecated use `hasCloseButton` instead |
Source
You can view the full source code for this package on Github.