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 |
| onMouseEnter | No type info | No | () => {} | |
| onMouseLeave | No type info | No | () => {} | |
| 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 timeout is 8000 milliseconds. If a number is provided, alert will be dismissed after that amount of time in milliseconds. |
| timeoutAnimation | number | No | 3000 | If the user hovers over the Alert and `timeout` expires, this is how long to wait before finally dismissing the Alert |
| 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
