Alert

An alert is a non-intrusive notification that shares brief, important messages with users.

CSS variables

Prefixed with 'pf-v6-c-alert'

Expand or collapse columnSelectorVariableValue
.pf-v6-c-alert--pf-v6-c-alert--BoxShadow
0px 10px 20px 0px rgb(41, 41, 41, 0.1500)
.pf-v6-c-alert--pf-v6-c-alert--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-alert--pf-v6-c-alert--GridTemplateColumns
max-content 1fr max-content
.pf-v6-c-alert--pf-v6-c-alert--GridTemplateAreas
"icon title action" ". description description" ". actiongroup actiongroup"
.pf-v6-c-alert--pf-v6-c-alert--BorderWidth
2px
.pf-v6-c-alert--pf-v6-c-alert--BorderColor
transparent
.pf-v6-c-alert--pf-v6-c-alert--BorderRadius
16px
.pf-v6-c-alert--pf-v6-c-alert--PaddingBlockStart
1rem
.pf-v6-c-alert--pf-v6-c-alert--PaddingInlineEnd
1rem
.pf-v6-c-alert--pf-v6-c-alert--PaddingBlockEnd
1rem
.pf-v6-c-alert--pf-v6-c-alert--PaddingInlineStart
1rem
.pf-v6-c-alert--pf-v6-c-alert--FontSize
0.875rem
.pf-v6-c-alert--pf-v6-c-alert__toggle--MarginBlockStart
calc(0.5rem * -1)
.pf-v6-c-alert--pf-v6-c-alert__toggle--MarginBlockEnd
calc(0.5rem * -1)
.pf-v6-c-alert--pf-v6-c-alert__toggle--MarginInlineStart
calc(0.5rem * -1)
.pf-v6-c-alert--pf-v6-c-alert__toggle--MarginInlineEnd
0.5rem
.pf-v6-c-alert--pf-v6-c-alert__toggle-icon--Rotate
0
.pf-v6-c-alert--pf-v6-c-alert__toggle-icon--TransitionTimingFunction
cubic-bezier(.4, 0, .2, 1)
.pf-v6-c-alert--pf-v6-c-alert__toggle-icon--TransitionDuration
200ms
.pf-v6-c-alert--pf-v6-c-alert__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-alert--pf-v6-c-alert__icon--MarginBlockStart
0.25rem
.pf-v6-c-alert--pf-v6-c-alert__icon--MarginInlineEnd
0.5rem
.pf-v6-c-alert--pf-v6-c-alert__icon--FontSize
0.875rem
.pf-v6-c-alert--pf-v6-c-alert__title--FontWeight
600
.pf-v6-c-alert--pf-v6-c-alert__title--Color
(In light theme) #151515
.pf-v6-c-alert--pf-v6-c-alert__title--max-lines
1
.pf-v6-c-alert--pf-v6-c-alert__action--MarginBlockStart
calc(0.5rem * -1)
.pf-v6-c-alert--pf-v6-c-alert__action--MarginBlockEnd
calc(0.5rem * -1)
.pf-v6-c-alert--pf-v6-c-alert__action--TranslateY
0.125rem
.pf-v6-c-alert--pf-v6-c-alert__action--MarginInlineEnd
calc(0.5rem * -1)
.pf-v6-c-alert--pf-v6-c-alert__description--PaddingBlockStart
0.25rem
.pf-v6-c-alert--pf-v6-c-alert__action-group--PaddingBlockStart-base
0.5rem
.pf-v6-c-alert--pf-v6-c-alert__action-group--PaddingBlockStart
0.5rem
.pf-v6-c-alert--pf-v6-c-alert__description--action-group--PaddingBlockStart-base
0.5rem
.pf-v6-c-alert--pf-v6-c-alert__description--action-group--PaddingBlockStart
0.5rem
.pf-v6-c-alert--pf-v6-c-alert__action-group__c-button--not-last-child--MarginInlineEnd
1rem
.pf-v6-c-alert--pf-v6-c-alert--m-custom--BorderColor
(In light theme) #147878
.pf-v6-c-alert--pf-v6-c-alert--m-custom__icon--Color
(In light theme) #147878
.pf-v6-c-alert--pf-v6-c-alert--m-custom__title--Color
(In light theme) #151515
.pf-v6-c-alert--pf-v6-c-alert--m-success--BorderColor
(In light theme) #3d7317
.pf-v6-c-alert--pf-v6-c-alert--m-success__icon--Color
(In light theme) #3d7317
.pf-v6-c-alert--pf-v6-c-alert--m-success__title--Color
(In light theme) #151515
.pf-v6-c-alert--pf-v6-c-alert--m-danger--BorderColor
(In light theme) #b1380b
.pf-v6-c-alert--pf-v6-c-alert--m-danger__icon--Color
(In light theme) #b1380b
.pf-v6-c-alert--pf-v6-c-alert--m-danger__title--Color
(In light theme) #151515
.pf-v6-c-alert--pf-v6-c-alert--m-warning--BorderColor
(In light theme) #dca614
.pf-v6-c-alert--pf-v6-c-alert--m-warning__icon--Color
(In light theme) #dca614
.pf-v6-c-alert--pf-v6-c-alert--m-warning__title--Color
(In light theme) #151515
.pf-v6-c-alert--pf-v6-c-alert--m-info--BorderColor
(In light theme) #5e40be
.pf-v6-c-alert--pf-v6-c-alert--m-info__icon--Color
(In light theme) #5e40be
.pf-v6-c-alert--pf-v6-c-alert--m-info__title--Color
(In light theme) #151515
.pf-v6-c-alert--pf-v6-c-alert--m-inline--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-alert--pf-v6-c-alert--m-inline--BoxShadow
none
.pf-v6-c-alert--pf-v6-c-alert--m-inline--m-plain--BorderWidth
0
.pf-v6-c-alert--pf-v6-c-alert--m-inline--m-plain--BackgroundColor
transparent
.pf-v6-c-alert--pf-v6-c-alert--m-inline--m-plain--PaddingBlockStart
0
.pf-v6-c-alert--pf-v6-c-alert--m-inline--m-plain--PaddingInlineEnd
0
.pf-v6-c-alert--pf-v6-c-alert--m-inline--m-plain--PaddingBlockEnd
0
.pf-v6-c-alert--pf-v6-c-alert--m-inline--m-plain--PaddingInlineStart
0
.pf-v6-c-alert--pf-v6-c-alert--m-expandable--GridTemplateColumns
auto max-content 1fr max-content
.pf-v6-c-alert--pf-v6-c-alert--m-expandable--GridTemplateAreas
"toggle icon title action" ". . description description" ". . actiongroup actiongroup"
.pf-v6-c-alert--pf-v6-c-alert--m-expandable__description--action-group--PaddingBlockStart
0.5rem
.pf-v6-c-alert--pf-v6-c-alert--m-expanded__toggle-icon--Rotate
-180deg
.pf-v6-c-alert--pf-v6-c-alert--m-expanded__description--action-group--PaddingBlockStart
0.5rem
.pf-v6-c-alert.pf-m-custom--pf-v6-c-alert--BorderColor
(In light theme) #147878
.pf-v6-c-alert.pf-m-custom--pf-v6-c-alert__icon--Color
(In light theme) #147878
.pf-v6-c-alert.pf-m-custom--pf-v6-c-alert__title--Color
(In light theme) #151515
.pf-v6-c-alert.pf-m-success--pf-v6-c-alert--BorderColor
(In light theme) #3d7317
.pf-v6-c-alert.pf-m-success--pf-v6-c-alert__icon--Color
(In light theme) #3d7317
.pf-v6-c-alert.pf-m-success--pf-v6-c-alert__title--Color
(In light theme) #151515
.pf-v6-c-alert.pf-m-danger--pf-v6-c-alert--BorderColor
(In light theme) #b1380b
.pf-v6-c-alert.pf-m-danger--pf-v6-c-alert__icon--Color
(In light theme) #b1380b
.pf-v6-c-alert.pf-m-danger--pf-v6-c-alert__title--Color
(In light theme) #151515
.pf-v6-c-alert.pf-m-warning--pf-v6-c-alert--BorderColor
(In light theme) #dca614
.pf-v6-c-alert.pf-m-warning--pf-v6-c-alert__icon--Color
(In light theme) #dca614
.pf-v6-c-alert.pf-m-warning--pf-v6-c-alert__title--Color
(In light theme) #151515
.pf-v6-c-alert.pf-m-info--pf-v6-c-alert--BorderColor
(In light theme) #5e40be
.pf-v6-c-alert.pf-m-info--pf-v6-c-alert__icon--Color
(In light theme) #5e40be
.pf-v6-c-alert.pf-m-info--pf-v6-c-alert__title--Color
(In light theme) #151515
.pf-v6-c-alert.pf-m-inline--pf-v6-c-alert--BoxShadow
none
.pf-v6-c-alert.pf-m-inline--pf-v6-c-alert--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-alert.pf-m-plain--pf-v6-c-alert--BorderWidth
0
.pf-v6-c-alert.pf-m-plain--pf-v6-c-alert--BackgroundColor
transparent
.pf-v6-c-alert.pf-m-plain--pf-v6-c-alert--PaddingBlockStart
0
.pf-v6-c-alert.pf-m-plain--pf-v6-c-alert--PaddingInlineEnd
0
.pf-v6-c-alert.pf-m-plain--pf-v6-c-alert--PaddingBlockEnd
0
.pf-v6-c-alert.pf-m-plain--pf-v6-c-alert--PaddingInlineStart
0
.pf-v6-c-alert.pf-m-expandable--pf-v6-c-alert--GridTemplateColumns
auto max-content 1fr max-content
.pf-v6-c-alert.pf-m-expandable--pf-v6-c-alert--GridTemplateAreas
"toggle icon title action" ". . description description" ". . actiongroup actiongroup"
.pf-v6-c-alert.pf-m-expandable--pf-v6-c-alert__description--action-group--PaddingBlockStart
0.5rem
.pf-v6-c-alert.pf-m-expanded--pf-v6-c-alert__toggle-icon--Rotate
-180deg
.pf-v6-c-alert.pf-m-expanded--pf-v6-c-alert__description--action-group--PaddingBlockStart
0.5rem
.pf-v6-c-alert__description + .pf-v6-c-alert__action-group--pf-v6-c-alert__action-group--PaddingBlockStart
0.5rem

Prefixed with 'pf-v6-c-alert-group'

Expand or collapse columnSelectorVariableValue
.pf-v6-c-alert-group--pf-v6-c-alert-group__item--MarginBlockStart
0.5rem
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast--InsetBlockStart
3rem
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast--InsetInlineEnd
2rem
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast--MaxWidth
37.5rem
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast--ZIndex
600
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--TransitionDuration--opacity--default
200ms
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--opacity--default
cubic-bezier(0, 0, .2, 1)
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--Transition--opacity--default
200ms cubic-bezier(0, 0, .2, 1) 0s
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--TransitionDuration--opacity
200ms
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--opacity
cubic-bezier(0, 0, .2, 1)
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--TransitionDelay--opacity
0ms
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--TransitionDuration--transform
400ms
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--transform
cubic-bezier(0, 0, .2, 1)
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--TransitionDelay--transform
0ms
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--TransitionDuration--grid-template-rows
400ms
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--grid-template-rows
cubic-bezier(0, 0, .2, 1)
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--TransitionDuration--margin-block
400ms
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--margin-block
cubic-bezier(0, 0, .2, 1)
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--c-alert--TransitionDuration
400ms
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--c-alert--TransitionTimingFunction
cubic-bezier(0, 0, .2, 1)
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--c-alert--Transition
all 400ms cubic-bezier(0, 0, .2, 1) 0s
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--opacity--default
200ms
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--opacity--default
cubic-bezier(.4, 0, .7, .2)
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--grid-template-rows--default
200ms
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--margin-block--default
200ms
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionDelay--default
200ms
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity--default
initial
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity--default
initial
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows--default
initial
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block--default
initial
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default
initial
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--transform
300ms
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--transform
cubic-bezier(.4, 0, .7, .2)
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--opacity
300ms
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--opacity
cubic-bezier(.4, 0, .7, .2)
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--margin-block
100ms
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--margin-block
cubic-bezier(.4, 0, .7, .2)
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--margin-block
300ms
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--grid-template-rows
300ms
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--grid-template-rows
cubic-bezier(.4, 0, .7, .2)
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--grid-template-rows
300ms
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--transform
initial
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--transform
initial
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity
initial
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity
initial
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--margin-block
initial
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--margin-block
initial
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block
initial
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--grid-template-rows
initial
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--grid-template-rows
initial
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows
initial
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionDuration
300ms
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionTimingFunction
cubic-bezier(.4, 0, .7, .2)
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--Transition
all 300ms cubic-bezier(.4, 0, .7, .2) 300ms
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration
initial
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction
initial
.pf-v6-c-alert-group--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition
initial
.pf-v6-c-alert-group--pf-v6-c-alert-group__overflow-button--BorderWidth
0px
.pf-v6-c-alert-group--pf-v6-c-alert-group__overflow-button--BorderColor
(In light theme) rgb(255, 255, 255, 0.0000)
.pf-v6-c-alert-group--pf-v6-c-alert-group__overflow-button--BorderRadius
16px
.pf-v6-c-alert-group--pf-v6-c-alert-group__overflow-button--PaddingBlockStart
1rem
.pf-v6-c-alert-group--pf-v6-c-alert-group__overflow-button--PaddingInlineEnd
1rem
.pf-v6-c-alert-group--pf-v6-c-alert-group__overflow-button--PaddingBlockEnd
1rem
.pf-v6-c-alert-group--pf-v6-c-alert-group__overflow-button--PaddingInlineStart
1rem
.pf-v6-c-alert-group--pf-v6-c-alert-group__overflow-button--Color
(In light theme) #0066cc
.pf-v6-c-alert-group--pf-v6-c-alert-group__overflow-button--BoxShadow
0px 10px 20px 0px rgb(41, 41, 41, 0.1500)
.pf-v6-c-alert-group--pf-v6-c-alert-group__overflow-button--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-alert-group--pf-v6-c-alert-group__overflow-button--hover--BorderWidth
0px
.pf-v6-c-alert-group--pf-v6-c-alert-group__overflow-button--hover--Color
(In light theme) #004d99
.pf-v6-c-alert-group--pf-v6-c-alert-group__overflow-button--hover--BackgroundColor
(In light theme) #f2f2f2
.pf-v6-c-alert-group--pf-v6-c-alert-group__overflow-button--hover--BoxShadow
0px 10px 20px 0px rgb(41, 41, 41, 0.1500), 0px 20px 20px -20px rgb(41, 41, 41, 0.2000)
.pf-v6-c-alert-group--pf-v6-c-alert-group__overflow-button--focus--Color
(In light theme) #004d99
.pf-v6-c-alert-group--pf-v6-c-alert-group__overflow-button--focus--BoxShadow
0px 10px 20px 0px rgb(41, 41, 41, 0.1500), 0px 20px 20px -20px rgb(41, 41, 41, 0.2000)
.pf-v6-c-alert-group--pf-v6-c-alert-group__overflow-button--active--Color
(In light theme) #004d99
.pf-v6-c-alert-group--pf-v6-c-alert-group__overflow-button--active--BoxShadow
0px 10px 20px 0px rgb(41, 41, 41, 0.1500), 0px 20px 20px -20px rgb(41, 41, 41, 0.2000)
.pf-v6-c-alert-group__overflow-button:hover--pf-v6-c-alert-group__overflow-button--BorderWidth
0px
.pf-v6-c-alert-group__overflow-button:hover--pf-v6-c-alert-group__overflow-button--BackgroundColor
(In light theme) #f2f2f2
.pf-v6-c-alert-group__overflow-button:hover--pf-v6-c-alert-group__overflow-button--Color
(In light theme) #004d99