HTML

Alert

ExamplesDocumentationCSS variables

Examples

Alert types

Copied to clipboard

Alert variations

Copied to clipboard

Inline alert types

Copied to clipboard

Inline alert variations

Copied to clipboard

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-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--BackgroundColorc_alert_BackgroundColor#fff
--pf-c-alert--BoxShadowc_alert_BoxShadownone
--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_BackgroundColortransparent
--pf-c-alert__icon--Colorc_alert__icon_Color#009596
--pf-c-alert__icon--FontSizec_alert__icon_FontSize1.125rem
--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-inline--BorderBottomWidthc_alert_m_inline_BorderBottomWidth1px
--pf-c-alert--m-inline--BorderColorc_alert_m_inline_BorderColor#ededed
--pf-c-alert--m-inline--BorderLeftWidthc_alert_m_inline_BorderLeftWidth0
--pf-c-alert--m-inline--BorderRightWidthc_alert_m_inline_BorderRightWidth1px
--pf-c-alert--m-inline--BorderStylec_alert_m_inline_BorderStylesolid
--pf-c-alert--m-inline--BorderTopWidthc_alert_m_inline_BorderTopWidth1px
--pf-c-alert--m-inline--BoxShadowc_alert_m_inline_BoxShadownone
--pf-c-alert--m-inline__icon--BackgroundColorc_alert_m_inline__icon_BackgroundColortransparent
--pf-c-alert--m-inline__icon--Colorc_alert_m_inline__icon_Color#009596
--pf-c-alert--m-inline__icon--FontSizec_alert_m_inline__icon_FontSize1.125rem
--pf-c-alert--m-inline__icon--PaddingBottomc_alert_m_inline__icon_PaddingBottom1rem
--pf-c-alert--m-inline__icon--PaddingLeftc_alert_m_inline__icon_PaddingLeft1rem
--pf-c-alert--m-inline__icon--PaddingRightc_alert_m_inline__icon_PaddingRight0
--pf-c-alert--m-inline__icon--PaddingTopc_alert_m_inline__icon_PaddingTopcalc(1rem + ((1.5rem - 1.125rem) / 2))
--pf-c-alert--m-inline--before--BackgroundColorc_alert_m_inline_before_BackgroundColor#73bcf7
--pf-c-alert--m-inline--before--Bottomc_alert_m_inline_before_Bottomcalc(-1 * 1px)
--pf-c-alert--m-inline--before--Topc_alert_m_inline_before_Topcalc(-1 * 1px)
--pf-c-alert--m-inline--before--Widthc_alert_m_inline_before_Width3px
--pf-c-alert--m-inline--m-danger__icon--Colorc_alert_m_inline_m_danger__icon_Color#c9190b
--pf-c-alert--m-inline--m-danger--before--BackgroundColorc_alert_m_inline_m_danger_before_BackgroundColor#c9190b
--pf-c-alert--m-inline--m-info__icon--Colorc_alert_m_inline_m_info__icon_Color#73bcf7
--pf-c-alert--m-inline--m-info--before--BackgroundColorc_alert_m_inline_m_info_before_BackgroundColor#73bcf7
--pf-c-alert--m-inline--m-success__icon--Colorc_alert_m_inline_m_success__icon_Color#92d400
--pf-c-alert--m-inline--m-success--before--BackgroundColorc_alert_m_inline_m_success_before_BackgroundColor#92d400
--pf-c-alert--m-inline--m-warning__icon--Colorc_alert_m_inline_m_warning__icon_Color#f0ab00
--pf-c-alert--m-inline--m-warning__icon--FontSizec_alert_m_inline_m_warning__icon_FontSize1.0625rem
--pf-c-alert--m-inline--m-warning--before--BackgroundColorc_alert_m_inline_m_warning_before_BackgroundColor#f0ab00
--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.25rem
--pf-c-alert--m-warning__title--Colorc_alert_m_warning__title_Color#795600