Skip to content

Button

A button is an object that communicates and triggers an action when it is clicked or selected.

CSS variables

Prefixed with 'pf-v6-c-button'

Expand or collapse columnSelectorVariableValue
.pf-v6-c-button--pf-v6-c-button--Display
inline-flex
.pf-v6-c-button--pf-v6-c-button--AlignItems
baseline
.pf-v6-c-button--pf-v6-c-button--JustifyContent
center
.pf-v6-c-button--pf-v6-c-button--Gap
0.5rem
.pf-v6-c-button--pf-v6-c-button--MinWidth
calc(1lh + 0.25rem + 0.25rem)
.pf-v6-c-button--pf-v6-c-button--PaddingBlockStart
0.5rem
.pf-v6-c-button--pf-v6-c-button--PaddingInlineEnd
1.5rem
.pf-v6-c-button--pf-v6-c-button--PaddingBlockEnd
0.5rem
.pf-v6-c-button--pf-v6-c-button--PaddingInlineStart
1.5rem
.pf-v6-c-button--pf-v6-c-button--Color
(In light theme) #151515
.pf-v6-c-button--pf-v6-c-button--LineHeight
1.5
.pf-v6-c-button--pf-v6-c-button--FontWeight
400
.pf-v6-c-button--pf-v6-c-button--FontSize
0.875rem
.pf-v6-c-button--pf-v6-c-button--BackgroundColor
transparent
.pf-v6-c-button--pf-v6-c-button--BorderColor
transparent
.pf-v6-c-button--pf-v6-c-button--BorderWidth
1px
.pf-v6-c-button--pf-v6-c-button--BorderRadius
999px
.pf-v6-c-button--pf-v6-c-button--TextDecorationLine
none
.pf-v6-c-button--pf-v6-c-button--TextDecorationStyle
none
.pf-v6-c-button--pf-v6-c-button--TextDecorationColor
currentcolor
.pf-v6-c-button--pf-v6-c-button--TransitionDelay
0s
.pf-v6-c-button--pf-v6-c-button--TransitionDuration
200ms
.pf-v6-c-button--pf-v6-c-button--TransitionTimingFunction
cubic-bezier(.4, 0, .7, .2)
.pf-v6-c-button--pf-v6-c-button--TransitionProperty
color, background, border-color
.pf-v6-c-button--pf-v6-c-button--ScaleX
1
.pf-v6-c-button--pf-v6-c-button--ScaleY
1
.pf-v6-c-button--pf-v6-c-button--border--offset
0
.pf-v6-c-button--pf-v6-c-button--hover--BackgroundColor
transparent
.pf-v6-c-button--pf-v6-c-button--hover--BorderColor
transparent
.pf-v6-c-button--pf-v6-c-button--hover--BorderWidth
2px
.pf-v6-c-button--pf-v6-c-button--hover--TextDecorationLine
none
.pf-v6-c-button--pf-v6-c-button--hover--TextDecorationStyle
none
.pf-v6-c-button--pf-v6-c-button--hover--TextDecorationColor
currentcolor
.pf-v6-c-button--pf-v6-c-button--hover--TextUnderlineOffset
calc(0.25rem + 1px)
.pf-v6-c-button--pf-v6-c-button--hover--ScaleX
1
.pf-v6-c-button--pf-v6-c-button--hover--ScaleY
1
.pf-v6-c-button--pf-v6-c-button--m-clicked--BackgroundColor
transparent
.pf-v6-c-button--pf-v6-c-button--m-clicked--BorderColor
transparent
.pf-v6-c-button--pf-v6-c-button--m-clicked--BorderWidth
2px
.pf-v6-c-button--pf-v6-c-button--m-clicked--TextDecorationLine
none
.pf-v6-c-button--pf-v6-c-button--m-clicked--TextDecorationStyle
none
.pf-v6-c-button--pf-v6-c-button--m-clicked--TextDecorationColor
currentcolor
.pf-v6-c-button--pf-v6-c-button--m-clicked--TextUnderlineOffset
0.25rem
.pf-v6-c-button--pf-v6-c-button--m-primary--Color
(In light theme) #ffffff
.pf-v6-c-button--pf-v6-c-button--m-primary--BackgroundColor
(In light theme) #0066cc
.pf-v6-c-button--pf-v6-c-button--m-primary__icon--Color
(In light theme) #ffffff
.pf-v6-c-button--pf-v6-c-button--m-primary--hover--Color
(In light theme) #ffffff
.pf-v6-c-button--pf-v6-c-button--m-primary--hover--BackgroundColor
(In light theme) #004d99
.pf-v6-c-button--pf-v6-c-button--m-primary--hover__icon--Color
(In light theme) #ffffff
.pf-v6-c-button--pf-v6-c-button--m-primary--m-clicked--Color
(In light theme) #ffffff
.pf-v6-c-button--pf-v6-c-button--m-primary--m-clicked--BackgroundColor
(In light theme) #004d99
.pf-v6-c-button--pf-v6-c-button--m-primary--m-clicked__icon--Color
(In light theme) #ffffff
.pf-v6-c-button--pf-v6-c-button--m-secondary--Color
(In light theme) #0066cc
.pf-v6-c-button--pf-v6-c-button--m-secondary--BorderColor
(In light theme) #0066cc
.pf-v6-c-button--pf-v6-c-button--m-secondary--TransitionDuration
100ms
.pf-v6-c-button--pf-v6-c-button--m-secondary__icon--Color
(In light theme) #0066cc
.pf-v6-c-button--pf-v6-c-button--m-secondary--hover--Color
(In light theme) #004d99
.pf-v6-c-button--pf-v6-c-button--m-secondary--hover--BorderColor
(In light theme) #004d99
.pf-v6-c-button--pf-v6-c-button--m-secondary--hover__icon--Color
(In light theme) #004d99
.pf-v6-c-button--pf-v6-c-button--m-secondary--m-clicked--Color
(In light theme) #004d99
.pf-v6-c-button--pf-v6-c-button--m-secondary--m-clicked--BorderColor
(In light theme) #004d99
.pf-v6-c-button--pf-v6-c-button--m-secondary--m-clicked__icon--Color
(In light theme) #004d99
.pf-v6-c-button--pf-v6-c-button--m-secondary--m-danger--Color
(In light theme) #b1380b
.pf-v6-c-button--pf-v6-c-button--m-secondary--m-danger--BorderColor
(In light theme) #b1380b
.pf-v6-c-button--pf-v6-c-button--m-secondary--m-danger__icon--Color
(In light theme) #b1380b
.pf-v6-c-button--pf-v6-c-button--m-secondary--m-danger--hover--Color
(In light theme) #731f00
.pf-v6-c-button--pf-v6-c-button--m-secondary--m-danger--hover--BorderColor
(In light theme) #731f00
.pf-v6-c-button--pf-v6-c-button--m-secondary--m-danger--hover__icon--Color
(In light theme) #731f00
.pf-v6-c-button--pf-v6-c-button--m-secondary--m-danger--m-clicked--Color
(In light theme) #731f00
.pf-v6-c-button--pf-v6-c-button--m-secondary--m-danger--m-clicked--BorderColor
(In light theme) #731f00
.pf-v6-c-button--pf-v6-c-button--m-secondary--m-danger--m-clicked__icon--Color
(In light theme) #731f00
.pf-v6-c-button--pf-v6-c-button--m-tertiary--Color
(In light theme) #0066cc
.pf-v6-c-button--pf-v6-c-button--m-tertiary--BorderColor
(In light theme) #e0e0e0
.pf-v6-c-button--pf-v6-c-button--m-tertiary--TransitionDuration
100ms
.pf-v6-c-button--pf-v6-c-button--m-tertiary__icon--Color
(In light theme) #0066cc
.pf-v6-c-button--pf-v6-c-button--m-tertiary--hover--Color
(In light theme) #004d99
.pf-v6-c-button--pf-v6-c-button--m-tertiary--hover--BorderColor
(In light theme) #4394e5
.pf-v6-c-button--pf-v6-c-button--m-tertiary--hover__icon--Color
(In light theme) #004d99
.pf-v6-c-button--pf-v6-c-button--m-tertiary--m-clicked--Color
(In light theme) #004d99
.pf-v6-c-button--pf-v6-c-button--m-tertiary--m-clicked--BorderColor
(In light theme) #0066cc
.pf-v6-c-button--pf-v6-c-button--m-tertiary--m-clicked__icon--Color
(In light theme) #004d99
.pf-v6-c-button--pf-v6-c-button--m-link--BorderRadius
6px
.pf-v6-c-button--pf-v6-c-button--m-link--PaddingInlineEnd
0.5rem
.pf-v6-c-button--pf-v6-c-button--m-link--PaddingInlineStart
0.5rem
.pf-v6-c-button--pf-v6-c-button--m-link--Color
(In light theme) #0066cc
.pf-v6-c-button--pf-v6-c-button--m-link--BackgroundColor
(In light theme) rgb(255, 255, 255, 0.0000)
.pf-v6-c-button--pf-v6-c-button--m-link__icon--Color
(In light theme) #0066cc
.pf-v6-c-button--pf-v6-c-button--m-link--hover--Color
(In light theme) #004d99
.pf-v6-c-button--pf-v6-c-button--m-link--hover--BackgroundColor
(In light theme) rgb(199, 199, 199, 0.2500)
.pf-v6-c-button--pf-v6-c-button--m-link--hover__icon--Color
(In light theme) #004d99
.pf-v6-c-button--pf-v6-c-button--m-link--m-clicked--Color
(In light theme) #004d99
.pf-v6-c-button--pf-v6-c-button--m-link--m-clicked--BackgroundColor
(In light theme) rgb(199, 199, 199, 0.2500)
.pf-v6-c-button--pf-v6-c-button--m-link--m-clicked__icon--Color
(In light theme) #004d99
.pf-v6-c-button--pf-v6-c-button--m-link--m-small--PaddingInlineEnd
0.25rem
.pf-v6-c-button--pf-v6-c-button--m-link--m-small--PaddingInlineStart
0.25rem
.pf-v6-c-button--pf-v6-c-button--m-link--BorderWidth
0px
.pf-v6-c-button--pf-v6-c-button--m-link--m-clicked--BorderWidth
0px
.pf-v6-c-button--pf-v6-c-button--m-link--hover--BorderWidth
0px
.pf-v6-c-button--pf-v6-c-button--m-link--BorderColor
(In light theme) rgb(255, 255, 255, 0.0000)
.pf-v6-c-button--pf-v6-c-button--m-link--m-clicked--BorderColor
(In light theme) rgb(255, 255, 255, 0.0000)
.pf-v6-c-button--pf-v6-c-button--m-link--hover--BorderColor
(In light theme) rgb(255, 255, 255, 0.0000)
.pf-v6-c-button--pf-v6-c-button--m-link--m-danger--Color
(In light theme) #b1380b
.pf-v6-c-button--pf-v6-c-button--m-link--m-danger--BackgroundColor
(In light theme) rgb(255, 255, 255, 0.0000)
.pf-v6-c-button--pf-v6-c-button--m-link--m-danger__icon--Color
(In light theme) #b1380b
.pf-v6-c-button--pf-v6-c-button--m-link--m-danger--hover--Color
(In light theme) #731f00
.pf-v6-c-button--pf-v6-c-button--m-link--m-danger--hover--BackgroundColor
(In light theme) rgb(199, 199, 199, 0.2500)
.pf-v6-c-button--pf-v6-c-button--m-link--m-danger--hover__icon--Color
(In light theme) #731f00
.pf-v6-c-button--pf-v6-c-button--m-link--m-danger--m-clicked--Color
(In light theme) #731f00
.pf-v6-c-button--pf-v6-c-button--m-link--m-danger--m-clicked--BackgroundColor
(In light theme) rgb(199, 199, 199, 0.2500)
.pf-v6-c-button--pf-v6-c-button--m-link--m-danger--m-clicked__icon--Color
(In light theme) #731f00
.pf-v6-c-button--pf-v6-c-button--m-link--m-inline--Display
inline-flex
.pf-v6-c-button--pf-v6-c-button--m-link--m-inline--JustifyContent
flex-start
.pf-v6-c-button--pf-v6-c-button--m-link--m-inline--FontSize
initial
.pf-v6-c-button--pf-v6-c-button--m-link--m-inline--LineHeight
initial
.pf-v6-c-button--pf-v6-c-button--m-link--m-inline--FontWeight
initial
.pf-v6-c-button--pf-v6-c-button--m-link--m-inline--PaddingBlockStart
0
.pf-v6-c-button--pf-v6-c-button--m-link--m-inline--PaddingInlineEnd
0
.pf-v6-c-button--pf-v6-c-button--m-link--m-inline--PaddingBlockEnd
0
.pf-v6-c-button--pf-v6-c-button--m-link--m-inline--PaddingInlineStart
0
.pf-v6-c-button--pf-v6-c-button--m-link--m-inline--TextDecorationColor
(In light theme) #8c8c8c
.pf-v6-c-button--pf-v6-c-button--m-link--m-inline--TextDecorationLine
underline
.pf-v6-c-button--pf-v6-c-button--m-link--m-inline--TextDecorationStyle
dashed
.pf-v6-c-button--pf-v6-c-button--m-link--m-inline--TextUnderlineOffset
0.25rem
.pf-v6-c-button--pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor
(In light theme) #4394e5
.pf-v6-c-button--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine
underline
.pf-v6-c-button--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle
dashed
.pf-v6-c-button--pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset
calc(0.25rem + 1px)
.pf-v6-c-button--pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationColor
(In light theme) #4394e5
.pf-v6-c-button--pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationLine
underline
.pf-v6-c-button--pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationStyle
dashed
.pf-v6-c-button--pf-v6-c-button--m-link--m-inline--m-clicked--TextUnderlineOffset
calc(0.25rem + 1px)
.pf-v6-c-button--pf-v6-c-button--m-link--m-inline--TransitionProperty
color, text-underline-offset
.pf-v6-c-button--pf-v6-c-button--m-link--m-inline--TransitionDuration
200ms, 300ms
.pf-v6-c-button--pf-v6-c-button--m-link--m-inline--TransitionTimingFunction
cubic-bezier(.4, 0, .7, .2), cubic-bezier(.4, 0, .2, 1)
.pf-v6-c-button--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart
0.25rem
.pf-v6-c-button--pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart
calc(0.25rem + 1rem + 0.5rem)
.pf-v6-c-button--pf-v6-c-button--m-link--m-inline--disabled--Color
(In light theme) #a3a3a3
.pf-v6-c-button--pf-v6-c-button--m-link--m-inline--disabled__icon--Color
(In light theme) #a3a3a3
.pf-v6-c-button--pf-v6-c-button--span--m-link--m-inline--Display
inline
.pf-v6-c-button--pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd
0.5rem
.pf-v6-c-button--pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart
0.5rem
.pf-v6-c-button--pf-v6-c-button--m-link--m-inline--Color
(In light theme) #0066cc
.pf-v6-c-button--pf-v6-c-button--m-link--m-inline__icon--Color
(In light theme) #0066cc
.pf-v6-c-button--pf-v6-c-button--m-link--m-inline--hover--Color
(In light theme) #004d99
.pf-v6-c-button--pf-v6-c-button--m-link--m-inline--hover__icon--Color
(In light theme) #004d99
.pf-v6-c-button--pf-v6-c-button--m-link--m-inline--m-clicked--Color
(In light theme) #004d99
.pf-v6-c-button--pf-v6-c-button--m-link--m-inline--m-clicked__icon--Color
(In light theme) #004d99
.pf-v6-c-button--pf-v6-c-button--m-plain--BorderRadius
6px
.pf-v6-c-button--pf-v6-c-button--m-plain--PaddingInlineEnd
0.5rem
.pf-v6-c-button--pf-v6-c-button--m-plain--PaddingInlineStart
0.5rem
.pf-v6-c-button--pf-v6-c-button--m-plain--Color
(In light theme) #1f1f1f
.pf-v6-c-button--pf-v6-c-button--m-plain__icon--Color
(In light theme) #151515
.pf-v6-c-button--pf-v6-c-button--m-plain--BackgroundColor
(In light theme) rgb(255, 255, 255, 0.0000)
.pf-v6-c-button--pf-v6-c-button--m-plain--hover--Color
(In light theme) #1f1f1f
.pf-v6-c-button--pf-v6-c-button--m-plain--hover--BackgroundColor
(In light theme) rgb(199, 199, 199, 0.2500)
.pf-v6-c-button--pf-v6-c-button--m-plain--m-clicked--Color
(In light theme) #1f1f1f
.pf-v6-c-button--pf-v6-c-button--m-plain--m-clicked--BackgroundColor
(In light theme) rgb(199, 199, 199, 0.2500)
.pf-v6-c-button--pf-v6-c-button--m-plain--disabled--Color
(In light theme) #a3a3a3
.pf-v6-c-button--pf-v6-c-button--m-plain--disabled__icon--Color
(In light theme) #a3a3a3
.pf-v6-c-button--pf-v6-c-button--m-plain--disabled--BackgroundColor
transparent
.pf-v6-c-button--pf-v6-c-button--m-plain--m-small--PaddingInlineEnd
0.25rem
.pf-v6-c-button--pf-v6-c-button--m-plain--m-small--PaddingInlineStart
0.25rem
.pf-v6-c-button--pf-v6-c-button--m-plain--BorderWidth
0px
.pf-v6-c-button--pf-v6-c-button--m-plain--m-clicked--BorderWidth
0px
.pf-v6-c-button--pf-v6-c-button--m-plain--hover--BorderWidth
0px
.pf-v6-c-button--pf-v6-c-button--m-plain--BorderColor
transparent
.pf-v6-c-button--pf-v6-c-button--m-plain--m-clicked--BorderColor
(In light theme) rgb(255, 255, 255, 0.0000)
.pf-v6-c-button--pf-v6-c-button--m-plain--hover--BorderColor
(In light theme) rgb(255, 255, 255, 0.0000)
.pf-v6-c-button--pf-v6-c-button--m-plain--m-no-padding--MinWidth
auto
.pf-v6-c-button--pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart
0
.pf-v6-c-button--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd
0
.pf-v6-c-button--pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd
0
.pf-v6-c-button--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart
0
.pf-v6-c-button--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineStart
0
.pf-v6-c-button--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineEnd
0
.pf-v6-c-button--pf-v6-c-button--m-plain--m-no-padding__icon--Color
(In light theme) #707070
.pf-v6-c-button--pf-v6-c-button--m-plain--m-no-padding--BackgroundColor
transparent
.pf-v6-c-button--pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-button--pf-v6-c-button--m-plain--m-no-padding--hover--BackgroundColor
transparent
.pf-v6-c-button--pf-v6-c-button--m-plain--m-no-padding--m-clicked--BackgroundColor
transparent
.pf-v6-c-button--pf-v6-c-button--m-plain--m-no-padding--border--offset
calc(0.125rem * -1)
.pf-v6-c-button--pf-v6-c-button--m-control--BorderRadius
6px
.pf-v6-c-button--pf-v6-c-button--m-control--PaddingInlineStart
1rem
.pf-v6-c-button--pf-v6-c-button--m-control--PaddingInlineEnd
1rem
.pf-v6-c-button--pf-v6-c-button--m-control--Color
(In light theme) #151515
.pf-v6-c-button--pf-v6-c-button--m-control--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-button--pf-v6-c-button--m-control--BorderColor
(In light theme) #8c8c8c
.pf-v6-c-button--pf-v6-c-button--m-control--BorderWidth
1px
.pf-v6-c-button--pf-v6-c-button--m-control__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-button--pf-v6-c-button--m-control--hover--Color
(In light theme) #151515
.pf-v6-c-button--pf-v6-c-button--m-control--hover--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-button--pf-v6-c-button--m-control--hover--BorderColor
(In light theme) #4394e5
.pf-v6-c-button--pf-v6-c-button--m-control--hover--BorderWidth
1px
.pf-v6-c-button--pf-v6-c-button--m-control--hover__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-button--pf-v6-c-button--m-control--m-clicked--Color
(In light theme) #151515
.pf-v6-c-button--pf-v6-c-button--m-control--m-clicked--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-button--pf-v6-c-button--m-control--m-clicked--BorderColor
(In light theme) #0066cc
.pf-v6-c-button--pf-v6-c-button--m-control--m-clicked--BorderWidth
2px
.pf-v6-c-button--pf-v6-c-button--m-control--m-clicked__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-button--pf-v6-c-button--m-control--m-small--PaddingInlineEnd
0.5rem
.pf-v6-c-button--pf-v6-c-button--m-control--m-small--PaddingInlineStart
0.5rem
.pf-v6-c-button--pf-v6-c-button--m-stateful--BorderRadius
6px
.pf-v6-c-button--pf-v6-c-button--m-stateful--PaddingInlineStart
1rem
.pf-v6-c-button--pf-v6-c-button--m-stateful--PaddingInlineEnd
1rem
.pf-v6-c-button--pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd
0.5rem
.pf-v6-c-button--pf-v6-c-button--m-stateful--m-small--PaddingInlineStart
0.5rem
.pf-v6-c-button--pf-v6-c-button--m-read--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-button--pf-v6-c-button--m-read--BorderColor
(In light theme) #8c8c8c
.pf-v6-c-button--pf-v6-c-button--m-read--hover--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-button--pf-v6-c-button--m-read--hover--BorderColor
(In light theme) #4394e5
.pf-v6-c-button--pf-v6-c-button--m-read--m-clicked--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-button--pf-v6-c-button--m-read--m-clicked--BorderColor
(In light theme) #0066cc
.pf-v6-c-button--pf-v6-c-button--m-unread--Color
(In light theme) #ffffff
.pf-v6-c-button--pf-v6-c-button--m-unread--BackgroundColor
(In light theme) #0066cc
.pf-v6-c-button--pf-v6-c-button--m-unread__icon--Color
(In light theme) #ffffff
.pf-v6-c-button--pf-v6-c-button--m-unread--hover--Color
(In light theme) #ffffff
.pf-v6-c-button--pf-v6-c-button--m-unread--hover--BackgroundColor
(In light theme) #004d99
.pf-v6-c-button--pf-v6-c-button--m-unread--hover__icon--Color
(In light theme) #ffffff
.pf-v6-c-button--pf-v6-c-button--m-unread--m-clicked--Color
(In light theme) #ffffff
.pf-v6-c-button--pf-v6-c-button--m-unread--m-clicked--BackgroundColor
(In light theme) #004d99
.pf-v6-c-button--pf-v6-c-button--m-unread--m-clicked__icon--Color
(In light theme) #ffffff
.pf-v6-c-button--pf-v6-c-button--m-attention--Color
(In light theme) #ffffff
.pf-v6-c-button--pf-v6-c-button--m-attention--BackgroundColor
(In light theme) #b1380b
.pf-v6-c-button--pf-v6-c-button--m-attention__icon--Color
(In light theme) #ffffff
.pf-v6-c-button--pf-v6-c-button--m-attention--hover--Color
(In light theme) #ffffff
.pf-v6-c-button--pf-v6-c-button--m-attention--hover--BackgroundColor
(In light theme) #731f00
.pf-v6-c-button--pf-v6-c-button--m-attention--hover__icon--Color
(In light theme) #ffffff
.pf-v6-c-button--pf-v6-c-button--m-attention--m-clicked--Color
(In light theme) #ffffff
.pf-v6-c-button--pf-v6-c-button--m-attention--m-clicked--BackgroundColor
(In light theme) #731f00
.pf-v6-c-button--pf-v6-c-button--m-attention--m-clicked__icon--Color
(In light theme) #ffffff
.pf-v6-c-button--pf-v6-c-button--m-warning--Color
(In light theme) #151515
.pf-v6-c-button--pf-v6-c-button--m-warning--BackgroundColor
(In light theme) #ffcc17
.pf-v6-c-button--pf-v6-c-button--m-warning__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-button--pf-v6-c-button--m-warning--hover--Color
(In light theme) #151515
.pf-v6-c-button--pf-v6-c-button--m-warning--hover--BackgroundColor
(In light theme) #dca614
.pf-v6-c-button--pf-v6-c-button--m-warning--hover__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-button--pf-v6-c-button--m-warning--m-clicked--Color
(In light theme) #151515
.pf-v6-c-button--pf-v6-c-button--m-warning--m-clicked--BackgroundColor
(In light theme) #dca614
.pf-v6-c-button--pf-v6-c-button--m-warning--m-clicked__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-button--pf-v6-c-button--m-danger--Color
(In light theme) #ffffff
.pf-v6-c-button--pf-v6-c-button--m-danger--BackgroundColor
(In light theme) #b1380b
.pf-v6-c-button--pf-v6-c-button--m-danger__icon--Color
(In light theme) #ffffff
.pf-v6-c-button--pf-v6-c-button--m-danger--hover--Color
(In light theme) #ffffff
.pf-v6-c-button--pf-v6-c-button--m-danger--hover--BackgroundColor
(In light theme) #731f00
.pf-v6-c-button--pf-v6-c-button--m-danger--hover__icon--Color
(In light theme) #ffffff
.pf-v6-c-button--pf-v6-c-button--m-danger--m-clicked--Color
(In light theme) #ffffff
.pf-v6-c-button--pf-v6-c-button--m-danger--m-clicked--BackgroundColor
(In light theme) #731f00
.pf-v6-c-button--pf-v6-c-button--m-danger--m-clicked__icon--Color
(In light theme) #ffffff
.pf-v6-c-button--pf-v6-c-button--m-display-lg--PaddingBlockStart
1rem
.pf-v6-c-button--pf-v6-c-button--m-display-lg--PaddingInlineEnd
2rem
.pf-v6-c-button--pf-v6-c-button--m-display-lg--PaddingBlockEnd
1rem
.pf-v6-c-button--pf-v6-c-button--m-display-lg--PaddingInlineStart
2rem
.pf-v6-c-button--pf-v6-c-button--m-display-lg--FontWeight
600
.pf-v6-c-button--pf-v6-c-button--m-link--m-display-lg--FontSize
0.875rem
.pf-v6-c-button--pf-v6-c-button--m-display-lg--hover--TextDecorationColor
(In light theme) #8c8c8c
.pf-v6-c-button--pf-v6-c-button--m-display-lg--hover--TextDecorationLine
underline
.pf-v6-c-button--pf-v6-c-button--m-display-lg--hover--TextDecorationStyle
dashed
.pf-v6-c-button--pf-v6-c-button--m-display-lg--hover--TextUnderlineOffset
calc(0.25rem + 1px)
.pf-v6-c-button--pf-v6-c-button--m-display-lg--m-clicked--TextDecorationColor
(In light theme) #8c8c8c
.pf-v6-c-button--pf-v6-c-button--m-display-lg--m-clicked--TextDecorationLine
underline
.pf-v6-c-button--pf-v6-c-button--m-display-lg--m-clicked--TextDecorationStyle
dashed
.pf-v6-c-button--pf-v6-c-button--m-display-lg--m-clicked--TextUnderlineOffset
calc(0.25rem + 1px)
.pf-v6-c-button--pf-v6-c-button--m-display-lg--m-primary--Color
(In light theme) #ffffff
.pf-v6-c-button--pf-v6-c-button--m-display-lg--m-primary--BackgroundColor
(In light theme) #0066cc
.pf-v6-c-button--pf-v6-c-button--m-display-lg--m-primary__icon--Color
(In light theme) #ffffff
.pf-v6-c-button--pf-v6-c-button--m-display-lg--m-primary--hover--Color
(In light theme) #ffffff
.pf-v6-c-button--pf-v6-c-button--m-display-lg--m-primary--hover--BackgroundColor
(In light theme) #004d99
.pf-v6-c-button--pf-v6-c-button--m-display-lg--m-primary--hover__icon--Color
(In light theme) #ffffff
.pf-v6-c-button--pf-v6-c-button--m-display-lg--m-primary--m-clicked--Color
(In light theme) #ffffff
.pf-v6-c-button--pf-v6-c-button--m-display-lg--m-primary--m-clicked--BackgroundColor
(In light theme) #004d99
.pf-v6-c-button--pf-v6-c-button--m-display-lg--m-primary--m-clicked__icon--Color
(In light theme) #ffffff
.pf-v6-c-button--pf-v6-c-button--m-display-lg--m-primary--hover--TextDecorationColor
currentcolor
.pf-v6-c-button--pf-v6-c-button--m-display-lg--m-primary--m-clicked--TextDecorationColor
currentcolor
.pf-v6-c-button--pf-v6-c-button--m-display-lg--m-secondary--Color
(In light theme) #151515
.pf-v6-c-button--pf-v6-c-button--m-display-lg--m-secondary--BorderColor
(In light theme) #0066cc
.pf-v6-c-button--pf-v6-c-button--m-display-lg--m-secondary__icon--Color
(In light theme) #0066cc
.pf-v6-c-button--pf-v6-c-button--m-display-lg--m-secondary--hover--Color
(In light theme) #151515
.pf-v6-c-button--pf-v6-c-button--m-display-lg--m-secondary--hover--BorderColor
(In light theme) #004d99
.pf-v6-c-button--pf-v6-c-button--m-display-lg--m-secondary--hover__icon--Color
(In light theme) #004d99
.pf-v6-c-button--pf-v6-c-button--m-display-lg--m-secondary--m-clicked--Color
(In light theme) #151515
.pf-v6-c-button--pf-v6-c-button--m-display-lg--m-secondary--m-clicked--BorderColor
(In light theme) #004d99
.pf-v6-c-button--pf-v6-c-button--m-display-lg--m-secondary--m-clicked__icon--Color
(In light theme) #004d99
.pf-v6-c-button--pf-v6-c-button--m-display-lg--m-tertiary--hover--BorderColor
(In light theme) #e0e0e0
.pf-v6-c-button--pf-v6-c-button--m-display-lg--m-tertiary--m-clicked--BorderColor
(In light theme) #e0e0e0
.pf-v6-c-button--pf-v6-c-button--m-small--PaddingBlockStart
0.25rem
.pf-v6-c-button--pf-v6-c-button--m-small--PaddingInlineEnd
1rem
.pf-v6-c-button--pf-v6-c-button--m-small--PaddingBlockEnd
0.25rem
.pf-v6-c-button--pf-v6-c-button--m-small--PaddingInlineStart
1rem
.pf-v6-c-button--pf-v6-c-button--disabled--Color
(In light theme) #707070
.pf-v6-c-button--pf-v6-c-button--disabled--BackgroundColor
(In light theme) #c7c7c7
.pf-v6-c-button--pf-v6-c-button--disabled--TextDecorationColor
currentcolor
.pf-v6-c-button--pf-v6-c-button--disabled--BorderColor
transparent
.pf-v6-c-button--pf-v6-c-button--disabled__icon--Color
(In light theme) #707070
.pf-v6-c-button--pf-v6-c-button__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-button--pf-v6-c-button--hover__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-button--pf-v6-c-button--m-clicked__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-button--pf-v6-c-button__icon--MarginInlineStart
0
.pf-v6-c-button--pf-v6-c-button__icon--MarginInlineEnd
0
.pf-v6-c-button--pf-v6-c-button__icon--m-start--MarginInlineEnd
0
.pf-v6-c-button--pf-v6-c-button__icon--m-end--MarginInlineStart
0
.pf-v6-c-button--pf-v6-c-button--m-notify__icon--AnimationDuration--notify
600ms
.pf-v6-c-button--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify
cubic-bezier(.4, 0, .2, 1)
.pf-v6-c-button--pf-v6-c-button__icon--TransitionDelay
0s
.pf-v6-c-button--pf-v6-c-button__icon--TransitionTimingFunction
auto
.pf-v6-c-button--pf-v6-c-button__icon--TransitionDuration
0s
.pf-v6-c-button--pf-v6-c-button__icon--TransitionProperty
none
.pf-v6-c-button--pf-v6-c-button__icon--Rotate
0deg
.pf-v6-c-button--pf-v6-c-button--hover__icon--TransitionTimingFunction
auto
.pf-v6-c-button--pf-v6-c-button--hover__icon--TransitionDuration
0s
.pf-v6-c-button--pf-v6-c-button--hover__icon--TransitionProperty
none
.pf-v6-c-button--pf-v6-c-button--hover__icon--Rotate
0deg
.pf-v6-c-button--pf-v6-c-button__icon--ScaleX
1
.pf-v6-c-button--pf-v6-c-button__icon--ScaleY
1
.pf-v6-c-button--pf-v6-c-button--hover__icon--ScaleX
1
.pf-v6-c-button--pf-v6-c-button--hover__icon--ScaleY
1
.pf-v6-c-button--pf-v6-c-button--m-favorite__icon--TransitionDuration
100ms
.pf-v6-c-button--pf-v6-c-button--m-favorite__icon--TransitionTimingFunction
cubic-bezier(.4, 0, .2, 1)
.pf-v6-c-button--pf-v6-c-button--m-favorited__icon--Color
(In light theme) #ffcc17
.pf-v6-c-button--pf-v6-c-button--m-favorited--hover__icon--Color
(In light theme) #dca614
.pf-v6-c-button--pf-v6-c-button--m-favorited__icon--AnimationDuration
200ms
.pf-v6-c-button--pf-v6-c-button--m-favorited__icon--AnimationTimingFunction
cubic-bezier(.4, 0, .2, 1)
.pf-v6-c-button--pf-v6-c-button__icon--favorite--Opacity
1
.pf-v6-c-button--pf-v6-c-button__icon--favorited--Opacity
0
.pf-v6-c-button--pf-v6-c-button--m-favorited__icon--favorite--Opacity
0
.pf-v6-c-button--pf-v6-c-button--m-favorited__icon--favorited--Opacity
1
.pf-v6-c-button--pf-v6-c-button__icon--favorite--TransitionDuration
100ms
.pf-v6-c-button--pf-v6-c-button__progress--width
calc(1rem + 0.5rem)
.pf-v6-c-button--pf-v6-c-button__progress--Opacity
0
.pf-v6-c-button--pf-v6-c-button__progress--TranslateY
-50%
.pf-v6-c-button--pf-v6-c-button__progress--TranslateX
0
.pf-v6-c-button--pf-v6-c-button__progress--InsetBlockStart
50%
.pf-v6-c-button--pf-v6-c-button__progress--InsetInlineStart
1rem
.pf-v6-c-button--pf-v6-c-button__progress--Color
(In light theme) #1f1f1f
.pf-v6-c-button--pf-v6-c-button--m-progress--PaddingInlineEnd
calc(1rem + calc(1rem + 0.5rem) / 2)
.pf-v6-c-button--pf-v6-c-button--m-progress--PaddingInlineStart
calc(1rem + calc(1rem + 0.5rem) / 2)
.pf-v6-c-button--pf-v6-c-button--m-in-progress--PaddingInlineEnd
1rem
.pf-v6-c-button--pf-v6-c-button--m-in-progress--PaddingInlineStart
calc(1rem + calc(1rem + 0.5rem))
.pf-v6-c-button--pf-v6-c-button--m-in-progress--m-plain--Color
(In light theme) #0066cc
.pf-v6-c-button--pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart
50%
.pf-v6-c-button--pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX
-50%
.pf-v6-c-button--pf-v6-c-button--m-settings__icon--TransitionDuration
200ms
.pf-v6-c-button--pf-v6-c-button--m-settings__icon--TransitionTimingFunction
cubic-bezier(.4, 0, .7, .2)
.pf-v6-c-button--pf-v6-c-button--m-settings--hover__icon--TransitionDuration
200ms
.pf-v6-c-button--pf-v6-c-button--m-settings--hover__icon--TransitionTimingFunction
cubic-bezier(0, 0, .2, 1)
.pf-v6-c-button--pf-v6-c-button--m-settings--hover__icon--Rotate
60deg
.pf-v6-c-button--pf-v6-c-button--m-primary__c-badge--BorderColor
(In light theme) #ffffff
.pf-v6-c-button--pf-v6-c-button--m-block--Display
flex
.pf-v6-c-button--pf-v6-c-button--m-block--Width
100%
.pf-v6-c-button--pf-v6-c-button--hamburger-icon--TransitionTimingFunction
cubic-bezier(0, 0, .2, 1)
.pf-v6-c-button--pf-v6-c-button--hamburger-icon--TransitionDuration
200ms
.pf-v6-c-button--pf-v6-c-button--hamburger-icon--top--path--base
path("M1,1 L9,1")
.pf-v6-c-button--pf-v6-c-button--hamburger-icon--middle--path--base
path("M1,5 L9,5")
.pf-v6-c-button--pf-v6-c-button--hamburger-icon--arrow--path--base
path("M1,5 L1,5 L1,5")
.pf-v6-c-button--pf-v6-c-button--hamburger-icon--bottom--path--base
path("M9,9 L1,9")
.pf-v6-c-button--pf-v6-c-button--hamburger-icon--top--path
path("M1,1 L9,1")
.pf-v6-c-button--pf-v6-c-button--hamburger-icon--middle--path
path("M1,5 L9,5")
.pf-v6-c-button--pf-v6-c-button--hamburger-icon--arrow--path
path("M1,5 L1,5 L1,5")
.pf-v6-c-button--pf-v6-c-button--hamburger-icon--bottom--path
path("M9,9 L1,9")
.pf-v6-c-button--pf-v6-c-button--hamburger-icon--top--collapse--path
path("M5,1 L9,1")
.pf-v6-c-button--pf-v6-c-button--hamburger-icon--arrow--collapse--path
path("M3,7 L1,5 L3,3")
.pf-v6-c-button--pf-v6-c-button--hamburger-icon--bottom--collapse--path
path("M9,9 L5,9")
.pf-v6-c-button--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX
-1
.pf-v6-c-button--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX
1
.pf-v6-c-button--pf-v6-c-button--m-circle--BorderRadius
999px
.pf-v6-c-button.pf-m-primary--pf-v6-c-button--Color
(In light theme) #ffffff
.pf-v6-c-button.pf-m-primary--pf-v6-c-button--BackgroundColor
(In light theme) #0066cc
.pf-v6-c-button.pf-m-primary--pf-v6-c-button__icon--Color
(In light theme) #ffffff
.pf-v6-c-button.pf-m-primary--pf-v6-c-button--hover--Color
(In light theme) #ffffff
.pf-v6-c-button.pf-m-primary--pf-v6-c-button--hover--BackgroundColor
(In light theme) #004d99
.pf-v6-c-button.pf-m-primary--pf-v6-c-button--hover__icon--Color
(In light theme) #ffffff
.pf-v6-c-button.pf-m-primary--pf-v6-c-button--m-clicked--Color
(In light theme) #ffffff
.pf-v6-c-button.pf-m-primary--pf-v6-c-button--m-clicked--BackgroundColor
(In light theme) #004d99
.pf-v6-c-button.pf-m-primary--pf-v6-c-button--m-clicked__icon--Color
(In light theme) #ffffff
.pf-v6-c-button.pf-m-primary .pf-v6-c-badge.pf-m-unread--pf-v6-c-badge--BorderColor
(In light theme) #ffffff
.pf-v6-c-button.pf-m-secondary--pf-v6-c-button--Color
(In light theme) #0066cc
.pf-v6-c-button.pf-m-secondary--pf-v6-c-button--BorderColor
(In light theme) #0066cc
.pf-v6-c-button.pf-m-secondary--pf-v6-c-button--TransitionDuration
100ms
.pf-v6-c-button.pf-m-secondary--pf-v6-c-button__icon--Color
(In light theme) #0066cc
.pf-v6-c-button.pf-m-secondary--pf-v6-c-button--hover--Color
(In light theme) #004d99
.pf-v6-c-button.pf-m-secondary--pf-v6-c-button--hover--BorderColor
(In light theme) #004d99
.pf-v6-c-button.pf-m-secondary--pf-v6-c-button--hover__icon--Color
(In light theme) #004d99
.pf-v6-c-button.pf-m-secondary--pf-v6-c-button--m-clicked--Color
(In light theme) #004d99
.pf-v6-c-button.pf-m-secondary--pf-v6-c-button--m-clicked--BorderColor
(In light theme) #004d99
.pf-v6-c-button.pf-m-secondary--pf-v6-c-button--m-clicked__icon--Color
(In light theme) #004d99
.pf-v6-c-button.pf-m-secondary--pf-v6-c-button--m-danger--Color
(In light theme) #b1380b
.pf-v6-c-button.pf-m-secondary--pf-v6-c-button--m-danger__icon--Color
(In light theme) #b1380b
.pf-v6-c-button.pf-m-secondary--pf-v6-c-button--m-danger--hover--Color
(In light theme) #731f00
.pf-v6-c-button.pf-m-secondary--pf-v6-c-button--m-danger--hover__icon--Color
(In light theme) #731f00
.pf-v6-c-button.pf-m-secondary--pf-v6-c-button--m-danger--m-clicked--Color
(In light theme) #731f00
.pf-v6-c-button.pf-m-secondary--pf-v6-c-button--m-danger--m-clicked__icon--Color
(In light theme) #731f00
.pf-v6-c-button.pf-m-secondary.pf-m-danger--pf-v6-c-button--m-secondary--BorderColor
(In light theme) #b1380b
.pf-v6-c-button.pf-m-secondary.pf-m-danger--pf-v6-c-button--m-secondary--hover--BorderColor
(In light theme) #731f00
.pf-v6-c-button.pf-m-secondary.pf-m-danger--pf-v6-c-button--m-secondary--m-clicked--BorderColor
(In light theme) #731f00
.pf-v6-c-button.pf-m-secondary.pf-m-danger--pf-v6-c-button--m-danger--BackgroundColor
transparent
.pf-v6-c-button.pf-m-secondary.pf-m-danger--pf-v6-c-button--m-danger--hover--BackgroundColor
transparent
.pf-v6-c-button.pf-m-secondary.pf-m-danger--pf-v6-c-button--m-danger--m-clicked--BackgroundColor
transparent
.pf-v6-c-button.pf-m-tertiary--pf-v6-c-button--Color
(In light theme) #0066cc
.pf-v6-c-button.pf-m-tertiary--pf-v6-c-button--BorderColor
(In light theme) #e0e0e0
.pf-v6-c-button.pf-m-tertiary--pf-v6-c-button--TransitionDuration
100ms
.pf-v6-c-button.pf-m-tertiary--pf-v6-c-button__icon--Color
(In light theme) #0066cc
.pf-v6-c-button.pf-m-tertiary--pf-v6-c-button--hover--Color
(In light theme) #004d99
.pf-v6-c-button.pf-m-tertiary--pf-v6-c-button--hover--BorderColor
(In light theme) #4394e5
.pf-v6-c-button.pf-m-tertiary--pf-v6-c-button--hover__icon--Color
(In light theme) #004d99
.pf-v6-c-button.pf-m-tertiary--pf-v6-c-button--m-clicked--Color
(In light theme) #004d99
.pf-v6-c-button.pf-m-tertiary--pf-v6-c-button--m-clicked--BorderColor
(In light theme) #0066cc
.pf-v6-c-button.pf-m-tertiary--pf-v6-c-button--m-clicked__icon--Color
(In light theme) #004d99
.pf-v6-c-button.pf-m-link--pf-v6-c-button--PaddingInlineEnd
0.5rem
.pf-v6-c-button.pf-m-link--pf-v6-c-button--PaddingInlineStart
0.5rem
.pf-v6-c-button.pf-m-link--pf-v6-c-button--Color
(In light theme) #0066cc
.pf-v6-c-button.pf-m-link--pf-v6-c-button--BorderWidth
0px
.pf-v6-c-button.pf-m-link--pf-v6-c-button--hover--BorderColor
(In light theme) rgb(255, 255, 255, 0.0000)
.pf-v6-c-button.pf-m-link--pf-v6-c-button--hover--BorderWidth
0px
.pf-v6-c-button.pf-m-link--pf-v6-c-button--m-clicked--BorderColor
(In light theme) rgb(255, 255, 255, 0.0000)
.pf-v6-c-button.pf-m-link--pf-v6-c-button--m-clicked--BorderWidth
0px
.pf-v6-c-button.pf-m-link--pf-v6-c-button--BorderColor
(In light theme) rgb(255, 255, 255, 0.0000)
.pf-v6-c-button.pf-m-link--pf-v6-c-button--BorderRadius
6px
.pf-v6-c-button.pf-m-link--pf-v6-c-button--BackgroundColor
(In light theme) rgb(255, 255, 255, 0.0000)
.pf-v6-c-button.pf-m-link--pf-v6-c-button__icon--Color
(In light theme) #0066cc
.pf-v6-c-button.pf-m-link--pf-v6-c-button--hover--Color
(In light theme) #004d99
.pf-v6-c-button.pf-m-link--pf-v6-c-button--hover--BackgroundColor
(In light theme) rgb(199, 199, 199, 0.2500)
.pf-v6-c-button.pf-m-link--pf-v6-c-button--hover__icon--Color
(In light theme) #004d99
.pf-v6-c-button.pf-m-link--pf-v6-c-button--m-clicked--Color
(In light theme) #004d99
.pf-v6-c-button.pf-m-link--pf-v6-c-button--m-clicked--BackgroundColor
(In light theme) rgb(199, 199, 199, 0.2500)
.pf-v6-c-button.pf-m-link--pf-v6-c-button--m-clicked__icon--Color
(In light theme) #004d99
.pf-v6-c-button.pf-m-link--pf-v6-c-button--m-small--PaddingInlineEnd
0.25rem
.pf-v6-c-button.pf-m-link--pf-v6-c-button--m-small--PaddingInlineStart
0.25rem
span.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--m-link--m-inline--Display
inline
span.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button__icon--m-start--MarginInlineEnd
0.5rem
span.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button__icon--m-end--MarginInlineStart
0.5rem
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--Display
inline-flex
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--JustifyContent
flex-start
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--FontSize
initial
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--LineHeight
initial
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--FontWeight
initial
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--PaddingBlockStart
0
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--PaddingInlineEnd
0
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--PaddingBlockEnd
0
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--PaddingInlineStart
0
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--TransitionDuration
200ms, 300ms
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--TransitionTimingFunction
cubic-bezier(.4, 0, .7, .2), cubic-bezier(.4, 0, .2, 1)
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--TransitionProperty
color, text-underline-offset
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--BackgroundColor
transparent
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button__progress--InsetInlineStart
0.25rem
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--TextDecorationLine
underline
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--TextDecorationStyle
dashed
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--hover--BackgroundColor
transparent
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--m-clicked--BackgroundColor
transparent
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--disabled--BackgroundColor
transparent
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--disabled--Color
(In light theme) #a3a3a3
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--disabled__icon--Color
(In light theme) #a3a3a3
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--m-link--Color
(In light theme) #151515
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--m-link__icon--Color
(In light theme) #0066cc
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--TextDecorationColor
currentcolor
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--hover--TextDecorationLine
underline
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--hover--TextDecorationStyle
dashed
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--hover--TextDecorationColor
currentcolor
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--m-clicked--TextDecorationLine
underline
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--m-clicked--TextDecorationStyle
dashed
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--m-clicked--TextDecorationColor
currentcolor
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--m-clicked--TextUnderlineOffset
calc(0.25rem + 1px)
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--m-link--hover--Color
(In light theme) #151515
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--m-link--hover__icon--Color
(In light theme) #004d99
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--m-link--m-clicked--Color
(In light theme) #151515
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--m-link--m-clicked__icon--Color
(In light theme) #004d99
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--BorderWidth
0
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--hover--BorderWidth
0
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--m-clicked--BorderWidth
0
.pf-v6-c-button.pf-m-link.pf-m-inline:hover--pf-v6-c-button--m-link--m-inline--TextUnderlineOffset
calc(0.25rem + 1px)
.pf-v6-c-button.pf-m-link.pf-m-inline:active--pf-v6-c-button--m-link--m-inline--TextUnderlineOffset
calc(0.25rem + 1px)
.pf-v6-c-button.pf-m-link.pf-m-danger--pf-v6-c-button--m-danger--Color
(In light theme) #b1380b
.pf-v6-c-button.pf-m-link.pf-m-danger--pf-v6-c-button--m-danger--BackgroundColor
(In light theme) rgb(255, 255, 255, 0.0000)
.pf-v6-c-button.pf-m-link.pf-m-danger--pf-v6-c-button--m-danger__icon--Color
(In light theme) #b1380b
.pf-v6-c-button.pf-m-link.pf-m-danger--pf-v6-c-button--m-danger--hover--Color
(In light theme) #731f00
.pf-v6-c-button.pf-m-link.pf-m-danger--pf-v6-c-button--m-danger--hover--BackgroundColor
(In light theme) rgb(199, 199, 199, 0.2500)
.pf-v6-c-button.pf-m-link.pf-m-danger--pf-v6-c-button--m-danger--hover__icon--Color
(In light theme) #731f00
.pf-v6-c-button.pf-m-link.pf-m-danger--pf-v6-c-button--m-danger--m-clicked--Color
(In light theme) #731f00
.pf-v6-c-button.pf-m-link.pf-m-danger--pf-v6-c-button--m-danger--m-clicked--BackgroundColor
(In light theme) rgb(199, 199, 199, 0.2500)
.pf-v6-c-button.pf-m-link.pf-m-danger--pf-v6-c-button--m-danger--m-clicked__icon--Color
(In light theme) #731f00
.pf-v6-c-button.pf-m-link.pf-m-display-lg--pf-v6-c-button--FontSize
0.875rem
.pf-v6-c-button.pf-m-warning--pf-v6-c-button--Color
(In light theme) #151515
.pf-v6-c-button.pf-m-warning--pf-v6-c-button--BackgroundColor
(In light theme) #ffcc17
.pf-v6-c-button.pf-m-warning--pf-v6-c-button__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-button.pf-m-warning--pf-v6-c-button--hover--Color
(In light theme) #151515
.pf-v6-c-button.pf-m-warning--pf-v6-c-button--hover--BackgroundColor
(In light theme) #dca614
.pf-v6-c-button.pf-m-warning--pf-v6-c-button--hover__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-button.pf-m-warning--pf-v6-c-button--m-clicked--Color
(In light theme) #151515
.pf-v6-c-button.pf-m-warning--pf-v6-c-button--m-clicked--BackgroundColor
(In light theme) #dca614
.pf-v6-c-button.pf-m-warning--pf-v6-c-button--m-clicked__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-button.pf-m-danger--pf-v6-c-button--Color
(In light theme) #ffffff
.pf-v6-c-button.pf-m-danger--pf-v6-c-button--BackgroundColor
(In light theme) #b1380b
.pf-v6-c-button.pf-m-danger--pf-v6-c-button__icon--Color
(In light theme) #ffffff
.pf-v6-c-button.pf-m-danger--pf-v6-c-button--hover--Color
(In light theme) #ffffff
.pf-v6-c-button.pf-m-danger--pf-v6-c-button--hover--BackgroundColor
(In light theme) #731f00
.pf-v6-c-button.pf-m-danger--pf-v6-c-button--hover__icon--Color
(In light theme) #ffffff
.pf-v6-c-button.pf-m-danger--pf-v6-c-button--m-clicked--Color
(In light theme) #ffffff
.pf-v6-c-button.pf-m-danger--pf-v6-c-button--m-clicked--BackgroundColor
(In light theme) #731f00
.pf-v6-c-button.pf-m-danger--pf-v6-c-button--m-clicked__icon--Color
(In light theme) #ffffff
.pf-v6-c-button.pf-m-control--pf-v6-c-button--BorderRadius
6px
.pf-v6-c-button.pf-m-control--pf-v6-c-button--PaddingInlineStart
1rem
.pf-v6-c-button.pf-m-control--pf-v6-c-button--PaddingInlineEnd
1rem
.pf-v6-c-button.pf-m-control--pf-v6-c-button--Color
(In light theme) #151515
.pf-v6-c-button.pf-m-control--pf-v6-c-button--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-button.pf-m-control--pf-v6-c-button--BorderColor
(In light theme) #8c8c8c
.pf-v6-c-button.pf-m-control--pf-v6-c-button--BorderWidth
1px
.pf-v6-c-button.pf-m-control--pf-v6-c-button__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-button.pf-m-control--pf-v6-c-button--hover--Color
(In light theme) #151515
.pf-v6-c-button.pf-m-control--pf-v6-c-button--hover--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-button.pf-m-control--pf-v6-c-button--hover--BorderColor
(In light theme) #4394e5
.pf-v6-c-button.pf-m-control--pf-v6-c-button--hover--BorderWidth
1px
.pf-v6-c-button.pf-m-control--pf-v6-c-button--hover__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-button.pf-m-control--pf-v6-c-button--m-clicked--Color
(In light theme) #151515
.pf-v6-c-button.pf-m-control--pf-v6-c-button--m-clicked--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-button.pf-m-control--pf-v6-c-button--m-clicked--BorderColor
(In light theme) #0066cc
.pf-v6-c-button.pf-m-control--pf-v6-c-button--m-clicked--BorderWidth
2px
.pf-v6-c-button.pf-m-control--pf-v6-c-button--m-clicked__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-button.pf-m-control--pf-v6-c-button--m-small--PaddingInlineEnd
0.5rem
.pf-v6-c-button.pf-m-control--pf-v6-c-button--m-small--PaddingInlineStart
0.5rem
.pf-v6-c-button.pf-m-plain--pf-v6-c-button--BorderWidth
0px
.pf-v6-c-button.pf-m-plain--pf-v6-c-button--hover--BorderColor
(In light theme) rgb(255, 255, 255, 0.0000)
.pf-v6-c-button.pf-m-plain--pf-v6-c-button--hover--BorderWidth
0px
.pf-v6-c-button.pf-m-plain--pf-v6-c-button--m-clicked--BorderColor
(In light theme) rgb(255, 255, 255, 0.0000)
.pf-v6-c-button.pf-m-plain--pf-v6-c-button--m-clicked--BorderWidth
0px
.pf-v6-c-button.pf-m-plain--pf-v6-c-button--BorderColor
transparent
.pf-v6-c-button.pf-m-plain--pf-v6-c-button--BorderRadius
6px
.pf-v6-c-button.pf-m-plain--pf-v6-c-button--Color
(In light theme) #1f1f1f
.pf-v6-c-button.pf-m-plain--pf-v6-c-button__icon--Color
(In light theme) #151515
.pf-v6-c-button.pf-m-plain--pf-v6-c-button--BackgroundColor
(In light theme) rgb(255, 255, 255, 0.0000)
.pf-v6-c-button.pf-m-plain--pf-v6-c-button--PaddingInlineEnd
0.5rem
.pf-v6-c-button.pf-m-plain--pf-v6-c-button--PaddingInlineStart
0.5rem
.pf-v6-c-button.pf-m-plain--pf-v6-c-button__progress--Color
(In light theme) #0066cc
.pf-v6-c-button.pf-m-plain--pf-v6-c-button--hover--Color
(In light theme) #1f1f1f
.pf-v6-c-button.pf-m-plain--pf-v6-c-button--hover--BackgroundColor
(In light theme) rgb(199, 199, 199, 0.2500)
.pf-v6-c-button.pf-m-plain--pf-v6-c-button--m-clicked--Color
(In light theme) #1f1f1f
.pf-v6-c-button.pf-m-plain--pf-v6-c-button--m-clicked--BackgroundColor
(In light theme) rgb(199, 199, 199, 0.2500)
.pf-v6-c-button.pf-m-plain--pf-v6-c-button--disabled--Color
(In light theme) #a3a3a3
.pf-v6-c-button.pf-m-plain--pf-v6-c-button--disabled__icon--Color
(In light theme) #a3a3a3
.pf-v6-c-button.pf-m-plain--pf-v6-c-button--disabled--BackgroundColor
transparent
.pf-v6-c-button.pf-m-plain--pf-v6-c-button--m-small--PaddingInlineEnd
0.25rem
.pf-v6-c-button.pf-m-plain--pf-v6-c-button--m-small--PaddingInlineStart
0.25rem
.pf-v6-c-button.pf-m-plain--pf-v6-c-button--m-stateful--PaddingInlineEnd
0.5rem
.pf-v6-c-button.pf-m-plain--pf-v6-c-button--m-stateful--PaddingInlineStart
0.5rem
.pf-v6-c-button.pf-m-plain--pf-v6-c-button--m-read--hover--BackgroundColor
(In light theme) rgb(199, 199, 199, 0.2500)
.pf-v6-c-button.pf-m-plain--pf-v6-c-button--m-read--m-clicked--BackgroundColor
(In light theme) rgb(199, 199, 199, 0.2500)
.pf-v6-c-button.pf-m-plain--pf-v6-c-button--m-read--BackgroundColor
(In light theme) rgb(255, 255, 255, 0.0000)
.pf-v6-c-button.pf-m-plain.pf-m-no-padding--pf-v6-c-button__icon--Color
(In light theme) #707070
.pf-v6-c-button.pf-m-plain.pf-m-no-padding--pf-v6-c-button--BackgroundColor
transparent
.pf-v6-c-button.pf-m-plain.pf-m-no-padding--pf-v6-c-button--hover--BackgroundColor
transparent
.pf-v6-c-button.pf-m-plain.pf-m-no-padding--pf-v6-c-button--m-clicked--BackgroundColor
transparent
.pf-v6-c-button.pf-m-plain.pf-m-no-padding--pf-v6-c-button--PaddingBlockStart
0
.pf-v6-c-button.pf-m-plain.pf-m-no-padding--pf-v6-c-button--PaddingBlockEnd
0
.pf-v6-c-button.pf-m-plain.pf-m-no-padding--pf-v6-c-button--PaddingInlineEnd
0
.pf-v6-c-button.pf-m-plain.pf-m-no-padding--pf-v6-c-button--PaddingInlineStart
0
.pf-v6-c-button.pf-m-plain.pf-m-no-padding--pf-v6-c-button--m-small--PaddingInlineEnd
0
.pf-v6-c-button.pf-m-plain.pf-m-no-padding--pf-v6-c-button--m-small--PaddingInlineStart
0
.pf-v6-c-button.pf-m-plain.pf-m-no-padding--pf-v6-c-button--border--offset
calc(0.125rem * -1)
.pf-v6-c-button.pf-m-stateful--pf-v6-c-button--BorderRadius
6px
.pf-v6-c-button.pf-m-stateful--pf-v6-c-button--PaddingInlineStart
1rem
.pf-v6-c-button.pf-m-stateful--pf-v6-c-button--PaddingInlineEnd
1rem
.pf-v6-c-button.pf-m-stateful--pf-v6-c-button--m-small--PaddingInlineEnd
0.5rem
.pf-v6-c-button.pf-m-stateful--pf-v6-c-button--m-small--PaddingInlineStart
0.5rem
.pf-v6-c-button.pf-m-read--pf-v6-c-button--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-button.pf-m-read--pf-v6-c-button--BorderColor
(In light theme) #8c8c8c
.pf-v6-c-button.pf-m-read--pf-v6-c-button--hover--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-button.pf-m-read--pf-v6-c-button--hover--BorderColor
(In light theme) #4394e5
.pf-v6-c-button.pf-m-read--pf-v6-c-button--m-clicked--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-button.pf-m-read--pf-v6-c-button--m-clicked--BorderColor
(In light theme) #0066cc
.pf-v6-c-button.pf-m-unread--pf-v6-c-button--Color
(In light theme) #ffffff
.pf-v6-c-button.pf-m-unread--pf-v6-c-button--BackgroundColor
(In light theme) #0066cc
.pf-v6-c-button.pf-m-unread--pf-v6-c-button__icon--Color
(In light theme) #ffffff
.pf-v6-c-button.pf-m-unread--pf-v6-c-button--hover--Color
(In light theme) #ffffff
.pf-v6-c-button.pf-m-unread--pf-v6-c-button--hover--BackgroundColor
(In light theme) #004d99
.pf-v6-c-button.pf-m-unread--pf-v6-c-button--hover__icon--Color
(In light theme) #ffffff
.pf-v6-c-button.pf-m-unread--pf-v6-c-button--m-clicked--Color
(In light theme) #ffffff
.pf-v6-c-button.pf-m-unread--pf-v6-c-button--m-clicked--BackgroundColor
(In light theme) #004d99
.pf-v6-c-button.pf-m-unread--pf-v6-c-button--m-clicked__icon--Color
(In light theme) #ffffff
.pf-v6-c-button.pf-m-attention--pf-v6-c-button--Color
(In light theme) #ffffff
.pf-v6-c-button.pf-m-attention--pf-v6-c-button--BackgroundColor
(In light theme) #b1380b
.pf-v6-c-button.pf-m-attention--pf-v6-c-button__icon--Color
(In light theme) #ffffff
.pf-v6-c-button.pf-m-attention--pf-v6-c-button--hover--Color
(In light theme) #ffffff
.pf-v6-c-button.pf-m-attention--pf-v6-c-button--hover--BackgroundColor
(In light theme) #731f00
.pf-v6-c-button.pf-m-attention--pf-v6-c-button--hover__icon--Color
(In light theme) #ffffff
.pf-v6-c-button.pf-m-attention--pf-v6-c-button--m-clicked--Color
(In light theme) #ffffff
.pf-v6-c-button.pf-m-attention--pf-v6-c-button--m-clicked--BackgroundColor
(In light theme) #731f00
.pf-v6-c-button.pf-m-attention--pf-v6-c-button--m-clicked__icon--Color
(In light theme) #ffffff
.pf-v6-c-button.pf-m-block--pf-v6-c-button--Display
flex
.pf-v6-c-button.pf-m-small--pf-v6-c-button--PaddingBlockStart
0.25rem
.pf-v6-c-button.pf-m-small--pf-v6-c-button--PaddingInlineEnd
1rem
.pf-v6-c-button.pf-m-small--pf-v6-c-button--PaddingBlockEnd
0.25rem
.pf-v6-c-button.pf-m-small--pf-v6-c-button--PaddingInlineStart
1rem
.pf-v6-c-button.pf-m-display-lg--pf-v6-c-button--PaddingBlockStart
1rem
.pf-v6-c-button.pf-m-display-lg--pf-v6-c-button--PaddingInlineEnd
2rem
.pf-v6-c-button.pf-m-display-lg--pf-v6-c-button--PaddingBlockEnd
1rem
.pf-v6-c-button.pf-m-display-lg--pf-v6-c-button--PaddingInlineStart
2rem
.pf-v6-c-button.pf-m-display-lg--pf-v6-c-button--FontSize
undefined
.pf-v6-c-button.pf-m-display-lg--pf-v6-c-button--hover--TextDecorationColor
(In light theme) #8c8c8c
.pf-v6-c-button.pf-m-display-lg--pf-v6-c-button--hover--TextDecorationLine
underline
.pf-v6-c-button.pf-m-display-lg--pf-v6-c-button--hover--TextDecorationStyle
dashed
.pf-v6-c-button.pf-m-display-lg--pf-v6-c-button--hover--TextUnderlineOffset
calc(0.25rem + 1px)
.pf-v6-c-button.pf-m-display-lg--pf-v6-c-button--m-clicked--TextDecorationColor
(In light theme) #8c8c8c
.pf-v6-c-button.pf-m-display-lg--pf-v6-c-button--m-clicked--TextDecorationLine
underline
.pf-v6-c-button.pf-m-display-lg--pf-v6-c-button--m-clicked--TextDecorationStyle
dashed
.pf-v6-c-button.pf-m-display-lg--pf-v6-c-button--m-clicked--TextUnderlineOffset
calc(0.25rem + 1px)
.pf-v6-c-button.pf-m-display-lg--pf-v6-c-button--m-primary--Color
(In light theme) #ffffff
.pf-v6-c-button.pf-m-display-lg--pf-v6-c-button--m-primary--BackgroundColor
(In light theme) #0066cc
.pf-v6-c-button.pf-m-display-lg--pf-v6-c-button--m-primary__icon--Color
(In light theme) #ffffff
.pf-v6-c-button.pf-m-display-lg--pf-v6-c-button--m-primary--hover--Color
(In light theme) #ffffff
.pf-v6-c-button.pf-m-display-lg--pf-v6-c-button--m-primary--hover--BackgroundColor
(In light theme) #004d99
.pf-v6-c-button.pf-m-display-lg--pf-v6-c-button--m-primary--hover__icon--Color
(In light theme) #ffffff
.pf-v6-c-button.pf-m-display-lg--pf-v6-c-button--m-primary--m-clicked--Color
(In light theme) #ffffff
.pf-v6-c-button.pf-m-display-lg--pf-v6-c-button--m-primary--m-clicked--BackgroundColor
(In light theme) #004d99
.pf-v6-c-button.pf-m-display-lg--pf-v6-c-button--m-primary--m-clicked__icon--Color
(In light theme) #ffffff
.pf-v6-c-button.pf-m-display-lg--pf-v6-c-button--m-secondary--Color
(In light theme) #151515
.pf-v6-c-button.pf-m-display-lg--pf-v6-c-button--m-secondary--BorderColor
(In light theme) #0066cc
.pf-v6-c-button.pf-m-display-lg--pf-v6-c-button--m-secondary__icon--Color
(In light theme) #0066cc
.pf-v6-c-button.pf-m-display-lg--pf-v6-c-button--m-secondary--hover--Color
(In light theme) #151515
.pf-v6-c-button.pf-m-display-lg--pf-v6-c-button--m-secondary--hover--BorderColor
(In light theme) #004d99
.pf-v6-c-button.pf-m-display-lg--pf-v6-c-button--m-secondary--hover__icon--Color
(In light theme) #004d99
.pf-v6-c-button.pf-m-display-lg--pf-v6-c-button--m-secondary--m-clicked--Color
(In light theme) #151515
.pf-v6-c-button.pf-m-display-lg--pf-v6-c-button--m-secondary--m-clicked--BorderColor
(In light theme) #004d99
.pf-v6-c-button.pf-m-display-lg--pf-v6-c-button--m-secondary--m-clicked__icon--Color
(In light theme) #004d99
.pf-v6-c-button.pf-m-display-lg--pf-v6-c-button--m-tertiary--hover--BorderColor
(In light theme) #e0e0e0
.pf-v6-c-button.pf-m-display-lg--pf-v6-c-button--m-tertiary--m-clicked--BorderColor
(In light theme) #e0e0e0
.pf-v6-c-button.pf-m-display-lg.pf-m-primary--pf-v6-c-button--hover--TextDecorationColor
currentcolor
.pf-v6-c-button.pf-m-display-lg.pf-m-primary--pf-v6-c-button--m-clicked--TextDecorationColor
currentcolor
.pf-v6-c-button.pf-m-favorited--pf-v6-c-button__icon--Color
(In light theme) #ffcc17
.pf-v6-c-button.pf-m-favorited--pf-v6-c-button--m-plain--m-no-padding__icon--Color
(In light theme) #ffcc17
.pf-v6-c-button.pf-m-favorited--pf-v6-c-button--hover__icon--Color
(In light theme) #dca614
.pf-v6-c-button.pf-m-favorited--pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color
(In light theme) #dca614
.pf-v6-c-button.pf-m-favorited--pf-v6-c-button__icon--favorite--Opacity
0
.pf-v6-c-button.pf-m-favorited--pf-v6-c-button__icon--favorited--Opacity
1
.pf-v6-c-button.pf-m-settings--pf-v6-c-button__icon--TransitionProperty
rotate
.pf-v6-c-button.pf-m-settings--pf-v6-c-button__icon--TransitionDuration
200ms
.pf-v6-c-button.pf-m-settings--pf-v6-c-button__icon--TransitionTimingFunction
cubic-bezier(.4, 0, .7, .2)
.pf-v6-c-button.pf-m-settings--pf-v6-c-button--hover__icon--TransitionProperty
rotate
.pf-v6-c-button.pf-m-settings--pf-v6-c-button--hover__icon--TransitionDuration
200ms
.pf-v6-c-button.pf-m-settings--pf-v6-c-button--hover__icon--TransitionTimingFunction
cubic-bezier(0, 0, .2, 1)
.pf-v6-c-button.pf-m-settings--pf-v6-c-button--hover__icon--Rotate
60deg
.pf-v6-c-button.pf-m-hamburger--pf-v6-c-button__icon--TransitionDelay
200ms
.pf-v6-c-button.pf-m-hamburger--pf-v6-c-button__icon--TransitionDuration
0s
.pf-v6-c-button.pf-m-hamburger--pf-v6-c-button__icon--TransitionProperty
scale
.pf-v6-c-button.pf-m-hamburger--pf-v6-c-button--hover__icon--TransitionDelay
200ms
.pf-v6-c-button.pf-m-hamburger--pf-v6-c-button--hover__icon--TransitionDuration
0s
.pf-v6-c-button.pf-m-hamburger--pf-v6-c-button--hover__icon--TransitionProperty
scale
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-button.pf-m-hamburger--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX
1
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-button.pf-m-hamburger--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX
-1
.pf-v6-c-button.pf-m-hamburger.pf-m-expand--pf-v6-c-button--hamburger-icon--top--path
path("M5,1 L9,1")
.pf-v6-c-button.pf-m-hamburger.pf-m-expand--pf-v6-c-button--hamburger-icon--arrow--path
path("M3,7 L1,5 L3,3")
.pf-v6-c-button.pf-m-hamburger.pf-m-expand--pf-v6-c-button--hamburger-icon--bottom--path
path("M9,9 L5,9")
.pf-v6-c-button.pf-m-hamburger.pf-m-expand--pf-v6-c-button__icon--TransitionDelay
0s
.pf-v6-c-button.pf-m-hamburger.pf-m-expand--pf-v6-c-button__icon--ScaleX
-1
.pf-v6-c-button.pf-m-hamburger.pf-m-expand--pf-v6-c-button--hover__icon--TransitionDelay
0s
.pf-v6-c-button.pf-m-hamburger.pf-m-expand--pf-v6-c-button--hover__icon--ScaleX
-1
.pf-v6-c-button.pf-m-hamburger.pf-m-collapse--pf-v6-c-button--hamburger-icon--top--path
path("M5,1 L9,1")
.pf-v6-c-button.pf-m-hamburger.pf-m-collapse--pf-v6-c-button--hamburger-icon--arrow--path
path("M3,7 L1,5 L3,3")
.pf-v6-c-button.pf-m-hamburger.pf-m-collapse--pf-v6-c-button--hamburger-icon--bottom--path
path("M9,9 L5,9")
.pf-v6-c-button.pf-m-hamburger.pf-m-collapse--pf-v6-c-button__icon--TransitionDelay
0s
.pf-v6-c-button.pf-m-hamburger.pf-m-collapse--pf-v6-c-button__icon--ScaleX
1
.pf-v6-c-button.pf-m-hamburger.pf-m-collapse--pf-v6-c-button--hover__icon--TransitionDelay
0s
.pf-v6-c-button.pf-m-hamburger.pf-m-collapse--pf-v6-c-button--hover__icon--ScaleX
1
.pf-v6-c-button.pf-m-circle--pf-v6-c-button--BorderRadius
999px
.pf-v6-c-button:hover--pf-v6-c-button--Color
(In light theme) #ffffff
.pf-v6-c-button:hover--pf-v6-c-button--BackgroundColor
transparent
.pf-v6-c-button:hover--pf-v6-c-button--BorderColor
transparent
.pf-v6-c-button:hover--pf-v6-c-button--BorderWidth
2px
.pf-v6-c-button:hover--pf-v6-c-button--ScaleX
1
.pf-v6-c-button:hover--pf-v6-c-button--ScaleY
1
.pf-v6-c-button:hover--pf-v6-c-button--m-plain--m-no-padding__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-button:hover--pf-v6-c-button__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-button:hover--pf-v6-c-button__icon--TransitionTimingFunction
auto
.pf-v6-c-button:hover--pf-v6-c-button__icon--TransitionDuration
0s
.pf-v6-c-button:hover--pf-v6-c-button__icon--TransitionProperty
none
.pf-v6-c-button:hover--pf-v6-c-button__icon--Rotate
0deg
.pf-v6-c-button:hover--pf-v6-c-button__icon--ScaleX
1
.pf-v6-c-button:hover--pf-v6-c-button__icon--ScaleY
1
.pf-v6-c-button:active--pf-v6-c-button--Color
(In light theme) #ffffff
.pf-v6-c-button:active--pf-v6-c-button--BackgroundColor
transparent
.pf-v6-c-button:active--pf-v6-c-button--BorderWidth
2px
.pf-v6-c-button:active--pf-v6-c-button--BorderColor
transparent
.pf-v6-c-button:active--pf-v6-c-button__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-button.pf-m-aria-disabled--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine
none
.pf-v6-c-button.pf-m-aria-disabled--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle
none
.pf-v6-c-button.pf-m-progress--pf-v6-c-button--PaddingInlineEnd
calc(1rem + calc(1rem + 0.5rem) / 2)
.pf-v6-c-button.pf-m-progress--pf-v6-c-button--PaddingInlineStart
calc(1rem + calc(1rem + 0.5rem) / 2)
.pf-v6-c-button.pf-m-in-progress--pf-v6-c-button--m-link--m-inline--PaddingInlineStart
calc(0.25rem + 1rem + 0.5rem)
.pf-v6-c-button.pf-m-in-progress:not(.pf-m-plain)--pf-v6-c-button--PaddingInlineEnd
1rem
.pf-v6-c-button.pf-m-in-progress:not(.pf-m-plain)--pf-v6-c-button--PaddingInlineStart
calc(1rem + calc(1rem + 0.5rem))
.pf-v6-c-button.pf-m-in-progress.pf-m-plain--pf-v6-c-button__progress--InsetInlineStart
50%
.pf-v6-c-button.pf-m-in-progress.pf-m-plain--pf-v6-c-button__progress--TranslateX
-50%
.pf-v6-c-button__icon.pf-m-start--pf-v6-c-button__icon--MarginInlineEnd
0
.pf-v6-c-button__icon.pf-m-end--pf-v6-c-button__icon--MarginInlineStart
0
.pf-v6-c-button__progress .pf-v6-c-spinner--pf-v6-c-spinner--Color
currentcolor

Prefixed with 'pf-d-button'

Expand or collapse columnSelectorVariableValue

Contribute

Community

PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.

Red Hat
Copyright © 2014-2026 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines