React

Alert

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

ExamplesPropsCSS variables

Examples

Default alert

Copied to clipboard

Info alert

Copied to clipboard

Success alert

Copied to clipboard

Warning alert

Copied to clipboard

Danger alert

Copied to clipboard

Inline alert types

Copied to clipboard

Inline alert variations

Copied to clipboard

Props

Alert props

The Alert component accepts the following props.

NameTypeRequiredDefaultDescription
variant'success' | 'danger' | 'warning' | 'info' | 'default'AlertVariant.infoAdds Alert variant styles
isInlinebooleanfalseFlag to indicate if the Alert is inline
titleReact.ReactNodeTitle of the Alert
actionReact.ReactNodenullAction button to put in the Alert. Should be <AlertActionLink> or <AlertActionCloseButton>
childrenReact.ReactNode''Content rendered inside the Alert
classNamestring''Additional classes added to the Alert
aria-labelstring`${capitalize(variant)} Alert`Adds accessible text to the Alert
variantLabelstring`${capitalize(variant)} alert:`Variant label text for screen readers
ouiaContextnull
ouiaIdnull

AlertActionCloseButton props

The AlertActionCloseButton component accepts the following props.

NameTypeRequiredDefaultDescription
classNamestring''Additional classes added to the AlertActionCloseButton
onClose() => void() => undefined as anyA callback for when the close button is clicked
aria-labelstring''Aria Label for the Close button
variantLabelstring''Variant Label for the Close button

The AlertActionLink component accepts the following props.

NameTypeRequiredDefaultDescription
childrenstring''Content rendered inside the AlertLinkAction
classNamestring''Additional classes added to the AlertActionLink

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