Examples
Types
Default alert:Default alert title
Info alert:Info alert title
Success alert:Success alert title
Warning alert:Warning alert title
Danger alert:Danger alert title
Variations
Success alert:Success alert title
Success alert description. This should tell the user more information about the alert.
Success alert:Success alert title
Success alert description. This should tell the user more information about the alert. This is a link.
Success alert:Success alert title
Success alert:Success alert title
Success alert:h1 Success alert title
Success alert:h6 Success alert title
Inline types
Default alert:Default inline alert title
Info alert:Info inline alert title
Success alert:Success inline alert title
Warning alert:Warning inline alert title
Danger alert:Danger inline alert title
Inline variations
Success alert:Success alert title
Success alert description. This should tell the user more information about the alert.
Success alert:Success alert title
Success alert description. This should tell the user more information about the alert. This is a link.
Success alert:Success alert title
Success alert:Success alert title
Success alert:Success alert title
Inline plain types
Default alert:Default inline alert title
Info alert:Info inline alert title
Success alert:Success inline alert title
Warning alert:Warning inline alert title
Danger alert:Danger inline alert title
Inline plain variations
It is not recommended to use an inline plain alert with actionClose nor actionLinks.
Success alert:Success alert title
Success alert description. This should tell the user more information about the alert.
Expandable
It is not recommended to use an expandable alert within a toast Alert group. In such a case, the Alert could timeout before users would have time to interact and view the entire Alert.
Static live region alert
Info alert:Default live region configuration
This alert uses the recommended
isLiveRegion prop to automatically set ARIA attributes and CSS classes. Info alert:Customized live region
You can alternatively omit the
isLiveRegion prop to specify ARIA attributes and CSS manually on the containing element. Dynamic live region alert
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.
Async live region alert
This shows how an alert could be triggered by an asynchronous event in the application. Note that you can customize how the alert will be announced to assistive technology. See the alert accessibility tab for more information.
Truncate
Info alert: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque cursus enim fringilla tincidunt. Proin lobortis aliquam dictum. Nam vel ullamcorper nulla, nec blandit dolor. Vivamus pellentesque neque justo, nec accumsan nulla rhoncus id. Suspendisse mollis, tortor quis faucibus volutpat, sem leo fringilla turpis, ac lacinia augue metus in nulla. Cras vestibulum lacinia orci. Pellentesque sodales consequat interdum. Sed porttitor tincidunt metus nec iaculis. Pellentesque non commodo justo. Morbi feugiat rhoncus neque, vitae facilisis diam aliquam nec. Sed dapibus vitae quam at tristique. Nunc vel commodo mi. Mauris et rhoncus leo.
Warning alert: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque cursus enim fringilla tincidunt. Proin lobortis aliquam dictum. Nam vel ullamcorper nulla, nec blandit dolor. Vivamus pellentesque neque justo, nec accumsan nulla rhoncus id. Suspendisse mollis, tortor quis faucibus volutpat, sem leo fringilla turpis, ac lacinia augue metus in nulla. Cras vestibulum lacinia orci. Pellentesque sodales consequat interdum. Sed porttitor tincidunt metus nec iaculis. Pellentesque non commodo justo. Morbi feugiat rhoncus neque, vitae facilisis diam aliquam nec. Sed dapibus vitae quam at tristique. Nunc vel commodo mi. Mauris et rhoncus leo.
Danger alert: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque cursus enim fringilla tincidunt. Proin lobortis aliquam dictum. Nam vel ullamcorper nulla, nec blandit dolor. Vivamus pellentesque neque justo, nec accumsan nulla rhoncus id. Suspendisse mollis, tortor quis faucibus volutpat, sem leo fringilla turpis, ac lacinia augue metus in nulla. Cras vestibulum lacinia orci. Pellentesque sodales consequat interdum. Sed porttitor tincidunt metus nec iaculis. Pellentesque non commodo justo. Morbi feugiat rhoncus neque, vitae facilisis diam aliquam nec. Sed dapibus vitae quam at tristique. Nunc vel commodo mi. Mauris et rhoncus leo.
Custom icons
Default alert:Default alert title
Info alert:Info alert title
Success alert:Success alert title
Warning alert:Warning alert title
Danger alert:Danger alert title
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 |
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 | --pf-global--Color--100 | #151515 | ||
| .pf-c-alert | --pf-global--Color--200 | #6a6e73 | ||
| .pf-c-alert | --pf-global--BorderColor--100 | #d2d2d2 | ||
| .pf-c-alert | --pf-global--primary-color--100 | #06c | ||
| .pf-c-alert | --pf-global--link--Color | #06c | ||
| .pf-c-alert | --pf-global--link--Color--hover | #004080 | ||
| .pf-c-alert | --pf-global--BackgroundColor--100 | #fff | ||
| .pf-c-alert | --pf-c-alert--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 | --pf-c-alert--BackgroundColor | #fff | ||
| .pf-c-alert | --pf-c-alert--GridTemplateColumns | max-content 1fr max-content | ||
| .pf-c-alert | --pf-c-alert--GridTemplateAreas | "icon title action"
". description description"
". actiongroup actiongroup" | ||
| .pf-c-alert | --pf-c-alert--BorderTopWidth | 2px | ||
| .pf-c-alert | --pf-c-alert--BorderTopColor | #009596 | ||
| .pf-c-alert | --pf-c-alert--PaddingTop | 1rem | ||
| .pf-c-alert | --pf-c-alert--PaddingRight | 1rem | ||
| .pf-c-alert | --pf-c-alert--PaddingBottom | 1rem | ||
| .pf-c-alert | --pf-c-alert--PaddingLeft | 1rem | ||
| .pf-c-alert | --pf-c-alert__FontSize | 0.875rem | ||
| .pf-c-alert | --pf-c-alert__toggle--MarginTop | calc(-1 * 0.375rem - 0.0625rem) | ||
| .pf-c-alert | --pf-c-alert__toggle--MarginBottom | calc(-1 * 0.375rem) | ||
| .pf-c-alert | --pf-c-alert__toggle--MarginLeft | calc(-1 * 1rem) | ||
| .pf-c-alert | --pf-c-alert__toggle-icon--Rotate | 0 | ||
| .pf-c-alert | --pf-c-alert__toggle-icon--Transition | all 250ms cubic-bezier(.42, 0, .58, 1) | ||
| .pf-c-alert | --pf-c-alert__icon--Color | #009596 | ||
| .pf-c-alert | --pf-c-alert__icon--MarginTop | 0.0625rem | ||
| .pf-c-alert | --pf-c-alert__icon--MarginRight | 0.5rem | ||
| .pf-c-alert | --pf-c-alert__icon--FontSize | 1.125rem | ||
| .pf-c-alert | --pf-c-alert__title--FontWeight | 700 | ||
| .pf-c-alert | --pf-c-alert__title--Color | #003737 | ||
| .pf-c-alert | --pf-c-alert__title--max-lines | 1 | ||
| .pf-c-alert | --pf-c-alert__action--MarginTop | calc(0.375rem * -1) | ||
| .pf-c-alert | --pf-c-alert__action--MarginBottom | calc(0.375rem * -1) | ||
| .pf-c-alert | --pf-c-alert__action--TranslateY | 0.125rem | ||
| .pf-c-alert | --pf-c-alert__action--MarginRight | calc(0.5rem * -1) | ||
| .pf-c-alert | --pf-c-alert__description--PaddingTop | 0.25rem | ||
| .pf-c-alert | --pf-c-alert__action-group--PaddingTop-base | 0.25rem | ||
| .pf-c-alert | --pf-c-alert__action-group--PaddingTop | 0.25rem | ||
| .pf-c-alert | --pf-c-alert__description--action-group--PaddingTop-base | 1rem | ||
| .pf-c-alert | --pf-c-alert__description--action-group--PaddingTop | 1rem | ||
| .pf-c-alert | --pf-c-alert__action-group__c-button--not-last-child--MarginRight | 1.5rem | ||
| .pf-c-alert | --pf-c-alert--m-success--BorderTopColor | #3e8635 | ||
| .pf-c-alert | --pf-c-alert--m-success__icon--Color | #3e8635 | ||
| .pf-c-alert | --pf-c-alert--m-success__title--Color | #1e4f18 | ||
| .pf-c-alert | --pf-c-alert--m-danger--BorderTopColor | #c9190b | ||
| .pf-c-alert | --pf-c-alert--m-danger__icon--Color | #c9190b | ||
| .pf-c-alert | --pf-c-alert--m-danger__title--Color | #a30000 | ||
| .pf-c-alert | --pf-c-alert--m-warning--BorderTopColor | #f0ab00 | ||
| .pf-c-alert | --pf-c-alert--m-warning__icon--Color | #f0ab00 | ||
| .pf-c-alert | --pf-c-alert--m-warning__title--Color | #795600 | ||
| .pf-c-alert | --pf-c-alert--m-info--BorderTopColor | #2b9af3 | ||
| .pf-c-alert | --pf-c-alert--m-info__icon--Color | #2b9af3 | ||
| .pf-c-alert | --pf-c-alert--m-info__title--Color | #002952 | ||
| .pf-c-alert | --pf-c-alert--m-inline--BoxShadow | none | ||
| .pf-c-alert | --pf-c-alert--m-inline--BackgroundColor | #f2f9f9 | ||
| .pf-c-alert | --pf-c-alert--m-inline--m-success--BackgroundColor | #f3faf2 | ||
| .pf-c-alert | --pf-c-alert--m-inline--m-danger--BackgroundColor | #faeae8 | ||
| .pf-c-alert | --pf-c-alert--m-inline--m-warning--BackgroundColor | #fdf7e7 | ||
| .pf-c-alert | --pf-c-alert--m-inline--m-info--BackgroundColor | #e7f1fa | ||
| .pf-c-alert | --pf-c-alert--m-inline--m-plain--BorderTopWidth | 0 | ||
| .pf-c-alert | --pf-c-alert--m-inline--m-plain--BackgroundColor | transparent | ||
| .pf-c-alert | --pf-c-alert--m-inline--m-plain--PaddingTop | 0 | ||
| .pf-c-alert | --pf-c-alert--m-inline--m-plain--PaddingRight | 0 | ||
| .pf-c-alert | --pf-c-alert--m-inline--m-plain--PaddingBottom | 0 | ||
| .pf-c-alert | --pf-c-alert--m-inline--m-plain--PaddingLeft | 0 | ||
| .pf-c-alert | --pf-c-alert--m-expandable--GridTemplateColumns | auto max-content 1fr max-content | ||
| .pf-c-alert | --pf-c-alert--m-expandable--GridTemplateAreas | "toggle icon title action"
". . description description"
". . actiongroup actiongroup" | ||
| .pf-c-alert | --pf-c-alert--m-expandable__description--action-group--PaddingTop | 0.25rem | ||
| .pf-c-alert | --pf-c-alert--m-expanded__toggle-icon--Rotate | 90deg | ||
| .pf-c-alert | --pf-c-alert--m-expanded__description--action-group--PaddingTop | 1rem | ||
| .pf-c-alert.pf-m-success | --pf-c-alert--BorderTopColor | #3e8635 | ||
| .pf-c-alert.pf-m-success | --pf-c-alert__icon--Color | #3e8635 | ||
| .pf-c-alert.pf-m-success | --pf-c-alert__title--Color | #1e4f18 | ||
| .pf-c-alert.pf-m-success | --pf-c-alert--m-inline--BackgroundColor | #f3faf2 | ||
| .pf-c-alert.pf-m-danger | --pf-c-alert--BorderTopColor | #c9190b | ||
| .pf-c-alert.pf-m-danger | --pf-c-alert__icon--Color | #c9190b | ||
| .pf-c-alert.pf-m-danger | --pf-c-alert__title--Color | #a30000 | ||
| .pf-c-alert.pf-m-danger | --pf-c-alert--m-inline--BackgroundColor | #faeae8 | ||
| .pf-c-alert.pf-m-warning | --pf-c-alert--BorderTopColor | #f0ab00 | ||
| .pf-c-alert.pf-m-warning | --pf-c-alert__icon--Color | #f0ab00 | ||
| .pf-c-alert.pf-m-warning | --pf-c-alert__title--Color | #795600 | ||
| .pf-c-alert.pf-m-warning | --pf-c-alert--m-inline--BackgroundColor | #fdf7e7 | ||
| .pf-c-alert.pf-m-info | --pf-c-alert--BorderTopColor | #2b9af3 | ||
| .pf-c-alert.pf-m-info | --pf-c-alert__icon--Color | #2b9af3 | ||
| .pf-c-alert.pf-m-info | --pf-c-alert__title--Color | #002952 | ||
| .pf-c-alert.pf-m-info | --pf-c-alert--m-inline--BackgroundColor | #e7f1fa | ||
| .pf-c-alert.pf-m-inline | --pf-c-alert--BoxShadow | none | ||
| .pf-c-alert.pf-m-inline | --pf-c-alert--BackgroundColor | #f2f9f9 | ||
| .pf-c-alert.pf-m-plain | --pf-c-alert--BorderTopWidth | 0 | ||
| .pf-c-alert.pf-m-plain | --pf-c-alert--BackgroundColor | transparent | ||
| .pf-c-alert.pf-m-plain | --pf-c-alert--PaddingTop | 0 | ||
| .pf-c-alert.pf-m-plain | --pf-c-alert--PaddingRight | 0 | ||
| .pf-c-alert.pf-m-plain | --pf-c-alert--PaddingBottom | 0 | ||
| .pf-c-alert.pf-m-plain | --pf-c-alert--PaddingLeft | 0 | ||
| .pf-c-alert.pf-m-expandable | --pf-c-alert--GridTemplateColumns | auto max-content 1fr max-content | ||
| .pf-c-alert.pf-m-expandable | --pf-c-alert--GridTemplateAreas | "toggle icon title action"
". . description description"
". . actiongroup actiongroup" | ||
| .pf-c-alert.pf-m-expandable | --pf-c-alert__description--action-group--PaddingTop | 0.25rem | ||
| .pf-c-alert.pf-m-expanded | --pf-c-alert__toggle-icon--Rotate | 90deg | ||
| .pf-c-alert.pf-m-expanded | --pf-c-alert__description--action-group--PaddingTop | 1rem | ||
| .pf-c-alert__description + .pf-c-alert__action-group | --pf-c-alert__action-group--PaddingTop | 1rem | ||
| .pf-c-alert__action > .pf-c-button | --pf-c-button--LineHeight | 1 | ||
| .pf-c-alert__action-group > .pf-c-button | --pf-c-button--m-link--m-inline--hover--TextDecoration | none | ||
| .pf-m-overpass-font .pf-c-alert__title | --pf-c-alert__title--FontWeight | 400 | ||
View source on GitHub
