HTML

Alert

Alerts are used to notify the user about a change in status or other event. Related design guidelines: Alerts and notifications

ExamplesDocumentationCSS Variables

Examples

Alert types

Info alert: Info Alert Title


Success alert: Success Alert Title


Warning alert: Warning Alert Title


Danger alert: Danger Alert Title

Copied to clipboard

Alert variations

Success alert: Success Alert Title

Success alert description. This is a link.


Success alert: Success Alert Title


Success alert: Success Alert Title


Success alert: Success Alert Title

Copied to clipboard

Documentation

Overview

Always add a modifier class. Do not use .pf-c-alert on its own.

Accessibility

Attribute Applied To Outcome
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-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.

CSS Variables

--pf-c-alert--BackgroundColorc_alert_BackgroundColor#fff
--pf-c-alert--BoxShadowc_alert_BoxShadow0 0.1875rem 0.4375rem 0.1875rem rgba(3,3,3,.13),0 0.6875rem 1.5rem 1rem rgba(3,3,3,.12)
--pf-c-alert__action--PaddingRightc_alert__action_PaddingRight0.25rem
--pf-c-alert__action--PaddingTopc_alert__action_PaddingTop0.6875rem
--pf-c-alert__description--MarginTopc_alert__description_MarginTopcalc(-1 * 0.5rem)
--pf-c-alert__description--PaddingBottomc_alert__description_PaddingBottom1rem
--pf-c-alert__description--PaddingLeftc_alert__description_PaddingLeft1rem
--pf-c-alert__description--PaddingRightc_alert__description_PaddingRight1rem
--pf-c-alert__icon--BackgroundColorc_alert__icon_BackgroundColor#73bcf7
--pf-c-alert__icon--Colorc_alert__icon_Color#004368
--pf-c-alert__icon--FontSizec_alert__icon_FontSize1.3125rem
--pf-c-alert__icon--Paddingc_alert__icon_Padding1rem
--pf-c-alert__title--Colorc_alert__title_Color#004368
--pf-c-alert__title--FontSizec_alert__title_FontSize1rem
--pf-c-alert__title--PaddingBottomc_alert__title_PaddingBottom1rem
--pf-c-alert__title--PaddingLeftc_alert__title_PaddingLeft1rem
--pf-c-alert__title--PaddingRightc_alert__title_PaddingRight1rem
--pf-c-alert__title--PaddingTopc_alert__title_PaddingTop1rem
--pf-c-alert--grid-template-columnsc_alert_grid_template_columnsmax-content 1fr max-content
--pf-c-alert--grid-template-rowsc_alert_grid_template_rows1fr auto
--pf-c-alert--m-danger__icon--BackgroundColorc_alert_m_danger__icon_BackgroundColor#c9190b
--pf-c-alert--m-danger__icon--Colorc_alert_m_danger__icon_Color#470000
--pf-c-alert--m-danger__title--Colorc_alert_m_danger__title_Color#a30000
--pf-c-alert--m-info__icon--BackgroundColorc_alert_m_info__icon_BackgroundColor#73bcf7
--pf-c-alert--m-info__icon--Colorc_alert_m_info__icon_Color#004368
--pf-c-alert--m-info__title--Colorc_alert_m_info__title_Color#004368
--pf-c-alert--m-success__icon--BackgroundColorc_alert_m_success__icon_BackgroundColor#92d400
--pf-c-alert--m-success__icon--Colorc_alert_m_success__icon_Color#486b00
--pf-c-alert--m-success__title--Colorc_alert_m_success__title_Color#486b00
--pf-c-alert--m-warning__icon--BackgroundColorc_alert_m_warning__icon_BackgroundColor#f0ab00
--pf-c-alert--m-warning__icon--Colorc_alert_m_warning__icon_Color#795600
--pf-c-alert--m-warning__icon--FontSizec_alert_m_warning__icon_FontSize1.3125rem
--pf-c-alert--m-warning__title--Colorc_alert_m_warning__title_Color#795600