Alert group
An alert group is used to stack and position alerts in a layer over the main content of a page. This component is mainly used for positioning toast alerts. Related design guidelines: Alerts and notifications
ExamplesPropsCSS VariablesExamples
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| variant | 'success' | 'danger' | 'warning' | 'info' | 'default' | No | AlertVariant.default | Adds Alert variant styles |
| isInline | boolean | No | false | Flag to indicate if the Alert is inline |
| title | React.ReactNode | Yes | Title of the Alert | |
| action | React.ReactNode | No | null | Action button to put in the Alert. Should be <AlertActionLink> or <AlertActionCloseButton> |
| children | React.ReactNode | No | '' | Content rendered inside the Alert |
| className | string | No | '' | Additional classes added to the Alert |
| aria-label | string | No | `${capitalize(variant)} Alert` | Adds accessible text to the Alert |
| variantLabel | string | No | `${capitalize(variant)} alert:` | Variant label text for screen readers |
| isLiveRegion | boolean | No | false | Flag to indicate if the Alert is in a live region |
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| className | string | No | Additional classes added to the AlertGroup | |
| children | React.ReactNode | No | Alerts to be rendered in the AlertGroup | |
| isToast | boolean | No | Toast notifications are positioned at the top right corner of the viewport | |
| appendTo | HTMLElement | (() => HTMLElement) | No | Determine where the alert is appended to |
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| className | string | No | '' | Additional classes added to the AlertActionCloseButton |
| onClose | () => void | No | () => undefined as any | A callback for when the close button is clicked |
| aria-label | string | No | '' | Aria Label for the Close button |
| variantLabel | string | No | Variant Label for the Close button |
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | string | No | Content rendered inside the AlertLinkAction | |
| className | string | No | '' | Additional classes added to the AlertActionLink |
CSS Variables
| .pf-c-alert-group | --pf-c-alert-group__item--MarginTop | 0.5rem | ||
| .pf-c-alert-group | --pf-c-alert-group--m-toast--Top | 3rem | ||
| .pf-c-alert-group | --pf-c-alert-group--m-toast--Right | 2rem | ||
| .pf-c-alert-group | --pf-c-alert-group--m-toast--MaxWidth | 37.5rem | ||
| .pf-c-alert-group | --pf-c-alert-group--m-toast--ZIndex | 600 | ||
