Alert
Alerts are used to notify the user about a change in status or other event. Related design guidelines: Alerts and notifications
ExamplesDocumentationCSS VariablesExamples
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:Success alert title
Inline types
Default inline 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
Documentation
Overview
Add a modifier class to the default alert to change the color: .pf-m-success, .pf-m-danger, .pf-m-warning, or .pf-m-info.
Accessibility
| Attribute | Applied to | Outcome |
|---|---|---|
aria-label="Default alert" | .pf-c-alert | Indicates the default alert. |
aria-label="Success alert" | .pf-c-alert | Indicates the success alert. |
aria-label="Danger alert" | .pf-c-alert | Indicates the danger alert. |
aria-label="Warning alert" | .pf-c-alert | Indicates the warning alert. |
aria-label="Information alert" | .pf-c-alert | Indicates the information alert. |
aria-label="Close success alert: Success alert title" | .pf-c-button.pf-m-plain | Indicates the close button. Please provide descriptive text to ensure assistive technologies clearly state which alert is being closed. |
aria-hidden="true" | .pf-c-alert__icon <i> | Hides icon for assistive technologies. Required |
| Class | Applied to | Outcome |
|---|---|---|
.pf-screen-reader | .pf-c-alert__title <span> | Content that is visually hidden but accessible to assistive technologies. This should state the type of alert. Required |
Usage
| Class | Applied to | Outcome |
|---|---|---|
.pf-c-alert | <div> | Applies default alert styling. Always use with a modifier class. Required |
.pf-c-alert__icon | <div> | Defines the alert icon. Required |
.pf-c-alert__title | <h1>, <h2>, <h3>, <h4>, <h5>, <h6> | Defines the alert title. Required |
.pf-c-alert__description | <div> | Defines the alert description area. |
.pf-c-alert__action | <div> | Defines the action button wrapper. Should contain .pf-c-button.pf-m-plain for close action or .pf-c-button.pf-m-link for link text. It should only include one action. |
.pf-c-alert__action-group | <div> | Defines the action button group. Should contain .pf-c-button.pf-m-link.pf-m-inline for inline link text. Note: only inline link buttons are supported in the alert action group. |
.pf-m-success | .pf-c-alert | Applies success styling. |
.pf-m-danger | .pf-c-alert | Applies danger styling. |
.pf-m-warning | .pf-c-alert | Applies warning styling. |
.pf-m-info | .pf-c-alert | Applies info styling. |
.pf-m-inline | .pf-c-alert | Applies inline styling. |
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--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__icon--Color | #009596 | ||
| .pf-c-alert | --pf-c-alert__icon--MarginTop | calc(0.25rem / 2) | ||
| .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--Color | #003737 | ||
| .pf-c-alert | --pf-c-alert__action--MarginTop | calc(0.375rem * 2 * -1) | ||
| .pf-c-alert | --pf-c-alert__action--Transform | translateY(0.375rem) | ||
| .pf-c-alert | --pf-c-alert__action--MarginRight | -0.5rem | ||
| .pf-c-alert | --pf-c-alert__description--PaddingTop | 0.5rem | ||
| .pf-c-alert | --pf-c-alert__action-group--PaddingTop | 0.25rem | ||
| .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 | #0f280d | ||
| .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-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 | #0f280d | ||
| .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__description + .pf-c-alert__action-group | --pf-c-alert__action-group--PaddingTop | 1rem | ||
| .pf-c-alert__action-group > .pf-c-button | --pf-c-button--m-link--m-inline--hover--TextDecoration | none | ||
