Button

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

Examples

Variant examples

PatternFly supports several button styling variants to be used in different scenarios as needed. The following button variants can be assigned using the variant property.




Variant
Description
Primary
Primary buttons are the most visually prominent variant. Use for the most important call to action.
Secondary
Secondary buttons are less visually prominant than primary buttons. Use for general actions on a page that require less emphasis than primary buttons.
Tertiary
Tertiary buttons are the least visually prominent variant. Use to retain a classic button format with less emphasis than primary or secondary buttons.
Danger
Danger buttons may be used for actions that are potentially destructive or difficult/impossible to undo. Danger is an independent variant, but all button variants may use the the isDanger property to apply similar styling.
Warning
Warning buttons may be used for actions that change an important setting or behavior, but not in a destructive or irreversible way.
Link
Links are labeled, but have no background or border. Use for actions that require less emphasis, actions that navigate users to another page within the same window, and/or actions that navigate to external pages in a new window. Links may be placed inline with text using the isInline property.
Plain
Plain buttons have no styling and are intended to be labeled with icons.
Control
Control buttons can be labeled with text or icons. Primarily intended to be paired with other controls in an input group.
Stateful
Stateful buttons are ideal for displaying the state of notifications. They have 3 states: read, unread and attention.

Disabled buttons

To indicate that an action is currently unavailable, all button variations can be disabled using the isDisabled property.



Small buttons

To fit into tight spaces, primary, secondary, tertiary, danger, and warning button variations can be made smaller using the "sm" value for the size property.

Call to action (CTA) buttons

CTA buttons and links direct users to complete an action. Primary, secondary, tertiary, and link button variants can be styled as CTAs using the "lg" value for the size property.

Block level buttons

Block level buttons span the full width of the parent element and can be enabled using the isBlock property.

Progress indicators

Progress indicators can be added to buttons to identify that an action is in progress after a click.




Buttons that link to another resource may take the form of primary, secondary, tertiary, or link variants. Use component="a" and an href property to designate the button's target link.

Inline links should use component="span" and the isInline property to wrap inline with surrounding text.

Router links can be used for in-app linking in React environments to prevent page reloading.

Aria-disabled examples

Accessible Rich Internet Applications (ARIA) is a set of roles and attributes specified by the World Wide Web Consortium. ARIA defines ways to make web content and web applications more accessible to people with disabilities.

Buttons that are aria-disabled are similar to normal disabled buttons, except they can receive focus. Every button variant can be aria-disabled using the isAriaDisabled property.

Unlike normal disabled buttons, aria-disabled buttons can support tooltips. Furthermore, aria-disabled buttons can operate as links, which also support tooltips.


Button with count

Buttons can display a count in the form of a badge to indicate some value or number by passing in the countOptions prop as a BadgeCountObject object. The BadgeCountObject object will handle count, isRead, and className props for the badge count.

Unread:

Unread disabled:

Read:

Read disabled:

Plain with no padding

To display a plain/icon button inline with text, use noPadding prop in addition to variant="plain".

This is an example of a button which is placed inline with text

Stateful

Stateful buttons are ideal for displaying the state of notifications. Use variant="stateful" alongside with the state property, which can have these 3 values: read, unread (used as default) and attention (which means unread and requires attention).

Read
Unread
Attention

Props

Button

*required
NameTypeDefaultDescription
aria-labelstringAdds accessible text to the button.
childrenReact.ReactNodeContent rendered inside the button
classNamestringAdditional classes added to the button
componentReact.ElementType<any> | React.ComponentType<any>Sets the base component to render. defaults to button
countOptionsBadgeCountObjectAdds count number to button
hasNoPaddingbooleanApplies no padding on a plain button variant. Use when plain button is placed inline with text
iconReact.ReactNode | nullIcon for the button.
iconPosition'start' | 'end' | 'left' | 'right'Sets position of the icon. Note: "left" and "right" are deprecated. Use "start" and "end" instead
inoperableEventsstring[]Events to prevent when the button is in an aria-disabled state
isAriaDisabledbooleanAdds disabled styling and communicates that the button is disabled using the aria-disabled html attribute
isBlockbooleanAdds block styling to button
isClickedbooleanAdds clicked styling to button.
isDangerbooleanAdds danger styling to secondary or link button variants
isDisabledbooleanAdds disabled styling and disables the button using the disabled html attribute
isInlinebooleanAdds inline styling to a link button
isLoadingbooleanAdds progress styling to button
ouiaIdnumber | stringValue to overwrite the randomly generated data-ouia-component-id.
ouiaSafebooleanSet the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.
size'default' | 'sm' | 'lg'Adds styling which affects the size of the button
spinnerAriaLabelstringAccessible label for the spinner to describe what is loading
spinnerAriaLabelledBystringId of element which describes what is being loaded
spinnerAriaValueTextstringText describing that current loading status or progress
state'read' | 'unread' | 'attention'Sets state of the stateful button variant. Default is "unread"
tabIndexnumberSets the button tabindex.
type'button' | 'submit' | 'reset'Sets button type
variant'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'link' | 'plain' | 'control' | 'stateful'Adds button variant styles

BadgeCountObject

*required
NameTypeDefaultDescription
classNamestringAdditional classes added to the badge count
countnumberAdds count number right of button
isReadbooleanAdds styling to the badge to indicate it has been read

CSS variables

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(1em * 1.5 + 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--TransitionDuration
200ms
.pf-v6-c-button--pf-v6-c-button--TransitionTimingFunction
cubic-bezier(.4, 0, .2, 1)
.pf-v6-c-button--pf-v6-c-button--TransitionProperty
color, background-color, border-width, border-color, padding
.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--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-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) #c7c7c7
.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) rgba(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) rgba(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) rgba(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-danger--Color
(In light theme) #b1380b
.pf-v6-c-button--pf-v6-c-button--m-link--m-danger--BackgroundColor
(In light theme) rgba(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) rgba(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) rgba(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--TextDecorationLine
underline
.pf-v6-c-button--pf-v6-c-button--m-link--m-inline--TextDecorationStyle
solid
.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
solid
.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-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) rgba(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) rgba(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) rgba(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--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__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__progress--Color
(In light theme) #1f1f1f
.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) #c7c7c7
.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-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-read--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-button--pf-v6-c-button--m-read--BorderColor
(In light theme) #c7c7c7
.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
500
.pf-v6-c-button--pf-v6-c-button--m-link--m-display-lg--FontSize
1rem
.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) #4d4d4d
.pf-v6-c-button--pf-v6-c-button--disabled--BackgroundColor
(In light theme) #c7c7c7
.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) #4d4d4d
.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__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--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-primary__c-badge--BorderColor
(In light theme) #c7c7c7
.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-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) #c7c7c7
.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) #c7c7c7
.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) #151515
.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) rgba(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) #151515
.pf-v6-c-button.pf-m-link--pf-v6-c-button--hover--BackgroundColor
(In light theme) rgba(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) rgba(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-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--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
solid
.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
solid
.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
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-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) rgba(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) rgba(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) rgba(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
1rem
.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) #c7c7c7
.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-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-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) #c7c7c7
.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-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) rgba(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) rgba(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) rgba(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-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--m-plain--PaddingInlineEnd
0
.pf-v6-c-button.pf-m-plain.pf-m-no-padding--pf-v6-c-button--m-plain--PaddingInlineStart
0
.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: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--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.pf-m-clicked--pf-v6-c-button--Color
(In light theme) #ffffff
.pf-v6-c-button.pf-m-clicked--pf-v6-c-button--BackgroundColor
transparent
.pf-v6-c-button.pf-m-clicked--pf-v6-c-button--BorderWidth
2px
.pf-v6-c-button.pf-m-clicked--pf-v6-c-button--BorderColor
transparent
.pf-v6-c-button.pf-m-clicked--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