Patternfly Logo

Examples

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 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

Success alert:Success alert title

Static live region alert

Info alert:Default live region configuration

This Alert uses the recommended isLiveRegion prop to automatically sets ARIA attributes and CSS classes.

Info alert:Customized live region

You can alternatively omit the isLiveRegion prop to specify ARIA attributes and CSS manually on the containing element.

Dynamic live region alert

Async live region alert

Alert timeout

Truncate

Info alert: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque cursus enim fringilla tincidunt. Proin lobortis aliquam dictum. Nam vel ullamcorper nulla, nec blandit dolor. Vivamus pellentesque neque justo, nec accumsan nulla rhoncus id. Suspendisse mollis, tortor quis faucibus volutpat, sem leo fringilla turpis, ac lacinia augue metus in nulla. Cras vestibulum lacinia orci. Pellentesque sodales consequat interdum. Sed porttitor tincidunt metus nec iaculis. Pellentesque non commodo justo. Morbi feugiat rhoncus neque, vitae facilisis diam aliquam nec. Sed dapibus vitae quam at tristique. Nunc vel commodo mi. Mauris et rhoncus leo.

Warning alert: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque cursus enim fringilla tincidunt. Proin lobortis aliquam dictum. Nam vel ullamcorper nulla, nec blandit dolor. Vivamus pellentesque neque justo, nec accumsan nulla rhoncus id. Suspendisse mollis, tortor quis faucibus volutpat, sem leo fringilla turpis, ac lacinia augue metus in nulla. Cras vestibulum lacinia orci. Pellentesque sodales consequat interdum. Sed porttitor tincidunt metus nec iaculis. Pellentesque non commodo justo. Morbi feugiat rhoncus neque, vitae facilisis diam aliquam nec. Sed dapibus vitae quam at tristique. Nunc vel commodo mi. Mauris et rhoncus leo.

Danger alert: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque cursus enim fringilla tincidunt. Proin lobortis aliquam dictum. Nam vel ullamcorper nulla, nec blandit dolor. Vivamus pellentesque neque justo, nec accumsan nulla rhoncus id. Suspendisse mollis, tortor quis faucibus volutpat, sem leo fringilla turpis, ac lacinia augue metus in nulla. Cras vestibulum lacinia orci. Pellentesque sodales consequat interdum. Sed porttitor tincidunt metus nec iaculis. Pellentesque non commodo justo. Morbi feugiat rhoncus neque, vitae facilisis diam aliquam nec. Sed dapibus vitae quam at tristique. Nunc vel commodo mi. Mauris et rhoncus leo.

Props

Alert properties
NameTypeRequiredDefaultDescription
actionCloseReact.ReactNodeNoClose button; use the AlertActionCloseButton component
actionLinksReact.ReactNodeNoAction links; use a single AlertActionLink component or multiple wrapped in an array or React.Fragment
aria-labelstringNo`${capitalize(variant)} Alert`Adds accessible text to the Alert
childrenReact.ReactNodeNo''Content rendered inside the Alert
classNamestringNo''Additional classes added to the Alert
isInlinebooleanNofalseFlag to indicate if the Alert is inline
isLiveRegionbooleanNofalseFlag to indicate if the Alert is in a live region
ouiaSafeNo type infoNotrue
timeoutnumber | booleanNofalseIf set to true, the time out is 8000 milliseconds. If a number is provided, alert will be dismissed after that amount of time in milliseconds.
titleReact.ReactNodeYesTitle of the Alert
truncateTitlenumberNo0Truncate title to number of lines
variant'success' | 'danger' | 'warning' | 'info' | 'default'NoAlertVariant.defaultAdds Alert variant styles
variantLabelstringNo`${capitalize(variant)} alert:`Variant label text for screen readers
AlertActionCloseButton properties
NameTypeRequiredDefaultDescription
aria-labelstringNo''Aria Label for the Close button
classNamestringNo''Additional classes added to the AlertActionCloseButton
onClose() => voidNo() => undefined as anyA callback for when the close button is clicked
variantLabelstringNoVariant Label for the Close button
AlertActionLink properties
NameTypeRequiredDefaultDescription
childrenstringNoContent rendered inside the AlertLinkAction
classNamestringNo''Additional classes added to the AlertActionLink

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__FontSize
0.875rem
.pf-c-alert--pf-c-alert__icon--Color
#009596
.pf-c-alert--pf-c-alert__icon--MarginTop
0.0625rem
.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--FontWeight
700
.pf-c-alert--pf-c-alert__title--Color
#003737
.pf-c-alert--pf-c-alert__title--max-lines
1
.pf-c-alert--pf-c-alert__action--MarginTop
calc(0.375rem * -1)
.pf-c-alert--pf-c-alert__action--MarginBottom
calc(0.375rem * -1)
.pf-c-alert--pf-c-alert__action--TranslateY
0.125rem
.pf-c-alert--pf-c-alert__action--MarginRight
calc(0.5rem * -1)
.pf-c-alert--pf-c-alert__description--PaddingTop
0.25rem
.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
#1e4f18
.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
#1e4f18
.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 > .pf-c-button--pf-c-button--LineHeight
1
.pf-c-alert__action-group > .pf-c-button--pf-c-button--m-link--m-inline--hover--TextDecoration
none
.pf-m-overpass-font .pf-c-alert__title--pf-c-alert__title--FontWeight
400

View source on GitHub