Examples
Props
Alert
Name | Type | Required | Default | Description |
---|---|---|---|---|
actionClose | React.ReactNode | No | Close button; use the AlertActionCloseButton component | |
actionLinks | React.ReactNode | No | Action links; use a single AlertActionLink component or multiple wrapped in an array or React.Fragment | |
aria-label | string | No | `${capitalize(variant)} Alert` | Adds accessible text to the Alert |
children | React.ReactNode | No | '' | Content rendered inside the Alert |
className | string | No | '' | Additional classes added to the Alert |
customIcon | React.ReactNode | No | Set a custom icon to the Alert. If not set the icon is set according to the variant | |
isInline | boolean | No | false | Flag to indicate if the Alert is inline |
isLiveRegion | boolean | No | false | Flag to indicate if the Alert is in a live region |
onTimeout | () => void | No | Function to be executed on alert timeout. Relevant when the timeout prop is set | |
ouiaSafe | No type info | No | true | |
timeout | number | boolean | No | false | If set to true, the time out is 8000 milliseconds. If a number is provided, alert will be dismissed after that amount of time in milliseconds. |
title | React.ReactNode | Yes | Title of the Alert | |
tooltipPosition | 'auto' | 'top' | 'bottom' | 'left' | 'right' | No | Position of the tooltip which is displayed if text is truncated | |
truncateTitle | number | No | 0 | Truncate title to number of lines |
variant | 'success' | 'danger' | 'warning' | 'info' | 'default' | No | AlertVariant.default | Adds Alert variant styles |
variantLabel | string | No | `${capitalize(variant)} alert:` | Variant label text for screen readers |
AlertGroup
Name | Type | Required | Default | Description |
---|---|---|---|---|
appendTo | HTMLElement | (() => HTMLElement) | No | Determine where the alert is appended to | |
children | React.ReactNode | No | Alerts to be rendered in the AlertGroup | |
className | string | No | Additional classes added to the AlertGroup | |
isToast | boolean | No | Toast notifications are positioned at the top right corner of the viewport |
AlertActionCloseButton
Name | Type | Required | Default | Description |
---|---|---|---|---|
aria-label | string | No | '' | Aria Label for the Close button |
className | string | No | '' | Additional classes added to the AlertActionCloseButton |
onClose | () => void | No | () => undefined as any | A callback for when the close button is clicked |
variantLabel | string | No | Variant Label for the Close button |
AlertActionLink
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 | |
View source on GitHub