React

Alert

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

ExamplesCSS Variables

Examples

Info alert

Info alert:Info alert title

Info alert description. This is a link.

Info alert:Info alert title

Info alert:Info alert title

Info alert:Info alert title

Copied to clipboard

Success alert

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

Warning alert

Warning alert:Warning alert title

Warning alert description. This is a link.

Warning alert:Warning alert title

Warning alert:Warning alert title

Warning alert:Warning alert title

Copied to clipboard

Danger alert

Danger alert:Danger alert title

Danger alert description. This is a link.

Danger alert:Danger alert title

Danger alert:Danger alert title

Danger alert:Danger alert title

Copied to clipboard

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