Examples
Static alert group
These alerts appear on page load and are discoverable from within the normal page content flow, and will not be announced individually/explicitly to assistive technology.
Success alert:Success alert
Info alert:Info alert
Toast alert group
Alerts asynchronously appended into dynamic AlertGroups with isLiveRegion will be announced to assistive technology at the moment the change happens, following the strategy used for aria-atomic, which defaults to false. This means only changes of type "addition" will be announced.
Toast alert group with overflow capture Beta
After a specified number of alerts displayed is reached, we will see an overflow message instead of new alerts. Alerts asynchronously appended into dynamic AlertGroups with isLiveRegion will be announced to assistive technology at the moment the change happens. When the overflow message appears or is updated in AlertGroups with isLiveRegion, the View 1 more alert text will be read, but the alert message will not be read. screen reader user or keyboard user will need a way to navigate to and reveal the hidden alerts before they disappear. Alternatively, there should be a place that notifications or alerts are collected to be viewed or read later. In this example we are showing a max of 4 alerts.
Singular dynamic alert group
This alert will appear in the page, most likely in response to a user action.
Singular dynamic alert group with overflow message Beta
This alert will appear in the page, most likely in response to a user action. In this example we are showing a max of 4 alerts.
Multiple dynamic alert group
These alerts will appear in the page, most likely in response to a user action.
Async alert group
This shows how an alert could be triggered by an asynchronous event in the application. Note how you can customize how the alert will be announced to assistive technology. See the alert group accessibility tab for more information.
Props
Alert
| Name | Type | Default | Description |
|---|---|---|---|
| titlerequired | React.ReactNode | Title of the alert | |
| actionClose | React.ReactNode | Close button; use the alertActionCloseButton component | |
| actionLinks | React.ReactNode | Action links; use a single alertActionLink component or multiple wrapped in an array or React.Fragment | |
| aria-label | string | `${capitalize(variant)} Alert` | Adds accessible text to the alert |
| children | React.ReactNode | '' | Content rendered inside the alert |
| className | string | '' | Additional classes added to the alert |
| customIcon | React.ReactNode | Set a custom icon to the alert. If not set the icon is set according to the variant | |
| isExpandable | boolean | false | Flag indicating that the alert is expandable |
| isInline | boolean | false | Flag to indicate if the alert is inline |
| isLiveRegion | boolean | false | Flag to indicate if the alert is in a live region |
| isPlain | boolean | false | Flag to indicate if the alert is plain |
| onMouseEnter | No type info | () => {} | |
| onMouseLeave | No type info | () => {} | |
| onTimeout | () => void | () => {} | Function to be executed on alert timeout. Relevant when the timeout prop is set |
| ouiaSafe | No type info | true | |
| timeout | number | boolean | false | If set to true, the timeout is 8000 milliseconds. If a number is provided, alert will be dismissed after that amount of time in milliseconds. |
| timeoutAnimation | number | 3000 | If the user hovers over the alert and `timeout` expires, this is how long to wait before finally dismissing the alert |
| titleHeadingLevel | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'h4' | Sets the heading level to use for the alert title. Default is h4. |
| toggleAriaLabel | string | `${capitalize(variant)} alert details` | Adds accessible text to the alert Toggle |
| tooltipPosition | TooltipPosition | 'auto' | 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' | Position of the tooltip which is displayed if text is truncated | |
| truncateTitle | number | 0 | Truncate title to number of lines |
| variant | 'success' | 'danger' | 'warning' | 'info' | 'default' | AlertVariant.default | Adds alert variant styles |
| variantLabel | string | `${capitalize(variant)} alert:` | Variant label text for screen readers |
AlertGroup
| Name | Type | Default | Description |
|---|---|---|---|
| appendTo | HTMLElement | (() => HTMLElement) | Determine where the alert is appended to | |
| children | React.ReactNode | Alerts to be rendered in the AlertGroup | |
| className | string | Additional classes added to the AlertGroup | |
| isLiveRegion | boolean | Turns the container into a live region so that changes to content within the AlertGroup, such as appending an Alert, are reliably announced to assistive technology. | |
| isToast | boolean | Toast notifications are positioned at the top right corner of the viewport | |
| onOverflowClick | () => void | Function to call if user clicks on overflow message | |
| overflowMessage | string | Custom text to show for the overflow message |
AlertActionCloseButton
| Name | Type | Default | Description |
|---|---|---|---|
| aria-label | string | '' | Aria Label for the Close button |
| className | string | '' | Additional classes added to the AlertActionCloseButton |
| onClose | () => void | () => undefined as any | A callback for when the close button is clicked |
| variantLabel | string | Variant Label for the Close button |
AlertActionLink
| Name | Type | Default | Description |
|---|---|---|---|
| children | string | Content rendered inside the AlertLinkAction | |
| className | string | '' | 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 | |
| .pf-c-alert-group | --pf-c-alert-group__overflow-button--BorderWidth | 0 | |
| .pf-c-alert-group | --pf-c-alert-group__overflow-button--PaddingTop | 1.5rem | |
| .pf-c-alert-group | --pf-c-alert-group__overflow-button--PaddingRight | 1rem | |
| .pf-c-alert-group | --pf-c-alert-group__overflow-button--PaddingBottom | 1.5rem | |
| .pf-c-alert-group | --pf-c-alert-group__overflow-button--PaddingLeft | 1rem | |
| .pf-c-alert-group | --pf-c-alert-group__overflow-button--Color | #06c | |
| .pf-c-alert-group | --pf-c-alert-group__overflow-button--BoxShadow | 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08) | |
| .pf-c-alert-group | --pf-c-alert-group__overflow-button--BackgroundColor | #fff | |
| .pf-c-alert-group | --pf-c-alert-group__overflow-button--hover--Color | #004080 | |
| .pf-c-alert-group | --pf-c-alert-group__overflow-button--hover--BoxShadow | 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08), 0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18) | |
| .pf-c-alert-group | --pf-c-alert-group__overflow-button--focus--Color | #004080 | |
| .pf-c-alert-group | --pf-c-alert-group__overflow-button--focus--BoxShadow | 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08), 0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18) | |
| .pf-c-alert-group | --pf-c-alert-group__overflow-button--active--Color | #004080 | |
| .pf-c-alert-group | --pf-c-alert-group__overflow-button--active--BoxShadow | 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08), 0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18) | |
| .pf-c-alert-group__overflow-button:hover | --pf-c-alert-group__overflow-button--Color | #004080 | |
| .pf-c-alert-group__overflow-button:hover | --pf-c-alert-group__overflow-button--BoxShadow | 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08), 0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18) | |
| .pf-c-alert-group__overflow-button:focus | --pf-c-alert-group__overflow-button--Color | #004080 | |
| .pf-c-alert-group__overflow-button:focus | --pf-c-alert-group__overflow-button--BoxShadow | 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08), 0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18) | |
| .pf-c-alert-group__overflow-button:active | --pf-c-alert-group__overflow-button--Color | #004080 | |
| .pf-c-alert-group__overflow-button:active | --pf-c-alert-group__overflow-button--BoxShadow | 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08), 0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18) | |
View source on GitHub
