Button

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.

Custom component

In addition to being able to pass a string to the component property, you can provide more fine-tuned customization by passing a callback that returns a component.

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

Router links can be used for in-app linking in React environments to prevent page reloading. To use a Link component from a router package, you can follow our custom component example and pass a callback to the component property of the Button:

<Button variant="link" component={(props: any) => <Link {...props} to="#" />}>
  Router link
</Button>

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--Gap
  • --pf-t--global--spacer--gap--text-to-element--default
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-button--pf-v6-c-button--MinWidth
calc(1em * 1.5 + 0.25rem + 0.25rem)
  • --pf-v6-c-button--MinWidth
  • calc(1em * --pf-v6-c-button--LineHeight + --pf-v6-c-button--PaddingBlockStart + --pf-v6-c-button--PaddingBlockEnd)
  • calc(1em * --pf-t--global--font--line-height--body + --pf-v6-c-back-to-top--c-button--PaddingBlockStart + --pf-v6-c-back-to-top--c-button--PaddingBlockEnd)
  • calc(1em * --pf-t--global--font--line-height--200 + --pf-t--global--spacer--xs + --pf-t--global--spacer--xs)
  • calc(1em * 1.5 + --pf-t--global--spacer--100 + --pf-t--global--spacer--100)
  • calc(1em * 1.5 + 0.25rem + 0.25rem)
.pf-v6-c-button--pf-v6-c-button--PaddingBlockStart
0.5rem
  • --pf-v6-c-button--PaddingBlockStart
  • --pf-t--global--spacer--control--vertical--default
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-button--pf-v6-c-button--PaddingInlineEnd
1.5rem
  • --pf-v6-c-button--PaddingInlineEnd
  • --pf-t--global--spacer--action--horizontal--default
  • --pf-t--global--spacer--lg
  • --pf-t--global--spacer--400
  • 1.5rem
.pf-v6-c-button--pf-v6-c-button--PaddingBlockEnd
0.5rem
  • --pf-v6-c-button--PaddingBlockEnd
  • --pf-t--global--spacer--control--vertical--default
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-button--pf-v6-c-button--PaddingInlineStart
1.5rem
  • --pf-v6-c-button--PaddingInlineStart
  • --pf-t--global--spacer--action--horizontal--default
  • --pf-t--global--spacer--lg
  • --pf-t--global--spacer--400
  • 1.5rem
.pf-v6-c-button--pf-v6-c-button--Color
(In light theme) #151515
  • --pf-v6-c-button--Color
  • --pf-t--global--text--color--regular
  • --pf-t--global--text--color--100
  • --pf-t--color--gray--95
  • #151515
.pf-v6-c-button--pf-v6-c-button--LineHeight
1.5
  • --pf-v6-c-button--LineHeight
  • --pf-t--global--font--line-height--body
  • --pf-t--global--font--line-height--200
  • 1.5
.pf-v6-c-button--pf-v6-c-button--FontWeight
400
  • --pf-v6-c-button--FontWeight
  • --pf-t--global--font--weight--body--default
  • --pf-t--global--font--weight--100
  • 400
.pf-v6-c-button--pf-v6-c-button--FontSize
0.875rem
  • --pf-v6-c-button--FontSize
  • --pf-t--global--font--size--body--default
  • --pf-t--global--font--size--sm
  • --pf-t--global--font--size--200
  • 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--BorderWidth
  • --pf-t--global--border--width--action--default
  • --pf-t--global--border--width--100
  • 1px
.pf-v6-c-button--pf-v6-c-button--BorderRadius
999px
  • --pf-v6-c-button--BorderRadius
  • --pf-t--global--border--radius--pill
  • --pf-t--global--border--radius--500
  • 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--TransitionDuration
200ms
  • --pf-v6-c-button--TransitionDuration
  • --pf-t--global--motion--duration--fade--default
  • --pf-t--global--motion--duration--md
  • --pf-t--global--duration--200
  • 200ms
.pf-v6-c-button--pf-v6-c-button--TransitionTimingFunction
cubic-bezier(.4, 0, .2, 1)
  • --pf-v6-c-button--TransitionTimingFunction
  • --pf-t--global--motion--timing-function--default
  • --pf-t--global--timing-function--200
  • 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--hover--BorderWidth
  • --pf-t--global--border--width--action--hover
  • --pf-t--global--border--width--200
  • 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--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--m-clicked--BorderWidth
  • --pf-t--global--border--width--action--clicked
  • --pf-t--global--border--width--200
  • 2px
.pf-v6-c-button--pf-v6-c-button--m-primary--Color
(In light theme) #ffffff
  • --pf-v6-c-button--m-primary--Color
  • --pf-t--global--text--color--on-brand--default
  • --pf-t--global--text--color--inverse
  • --pf-t--global--text--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button--pf-v6-c-button--m-primary--BackgroundColor
(In light theme) #0066cc
  • --pf-v6-c-button--m-primary--BackgroundColor
  • --pf-t--global--color--brand--default
  • --pf-t--global--color--brand--200
  • --pf-t--color--blue--50
  • #0066cc
.pf-v6-c-button--pf-v6-c-button--m-primary__icon--Color
(In light theme) #ffffff
  • --pf-v6-c-button--m-primary__icon--Color
  • --pf-t--global--icon--color--on-brand--default
  • --pf-t--global--icon--color--inverse
  • --pf-t--global--icon--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button--pf-v6-c-button--m-primary--hover--Color
(In light theme) #ffffff
  • --pf-v6-c-button--m-primary--hover--Color
  • --pf-t--global--text--color--on-brand--hover
  • --pf-t--global--text--color--inverse
  • --pf-t--global--text--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button--pf-v6-c-button--m-primary--hover--BackgroundColor
(In light theme) #004d99
  • --pf-v6-c-button--m-primary--hover--BackgroundColor
  • --pf-t--global--color--brand--hover
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-button--pf-v6-c-button--m-primary--hover__icon--Color
(In light theme) #ffffff
  • --pf-v6-c-button--m-primary--hover__icon--Color
  • --pf-t--global--icon--color--on-brand--hover
  • --pf-t--global--icon--color--inverse
  • --pf-t--global--icon--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button--pf-v6-c-button--m-primary--m-clicked--Color
(In light theme) #ffffff
  • --pf-v6-c-button--m-primary--m-clicked--Color
  • --pf-t--global--text--color--on-brand--clicked
  • --pf-t--global--text--color--inverse
  • --pf-t--global--text--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button--pf-v6-c-button--m-primary--m-clicked--BackgroundColor
(In light theme) #004d99
  • --pf-v6-c-button--m-primary--m-clicked--BackgroundColor
  • --pf-t--global--color--brand--clicked
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-button--pf-v6-c-button--m-primary--m-clicked__icon--Color
(In light theme) #ffffff
  • --pf-v6-c-button--m-primary--m-clicked__icon--Color
  • --pf-t--global--icon--color--on-brand--clicked
  • --pf-t--global--icon--color--inverse
  • --pf-t--global--icon--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button--pf-v6-c-button--m-secondary--Color
(In light theme) #0066cc
  • --pf-v6-c-button--m-secondary--Color
  • --pf-t--global--text--color--brand--default
  • --pf-t--global--color--brand--default
  • --pf-t--global--color--brand--200
  • --pf-t--color--blue--50
  • #0066cc
.pf-v6-c-button--pf-v6-c-button--m-secondary--BorderColor
(In light theme) #0066cc
  • --pf-v6-c-button--m-secondary--BorderColor
  • --pf-t--global--border--color--brand--default
  • --pf-t--global--color--brand--default
  • --pf-t--global--color--brand--200
  • --pf-t--color--blue--50
  • #0066cc
.pf-v6-c-button--pf-v6-c-button--m-secondary--TransitionDuration
100ms
  • --pf-v6-c-button--m-secondary--TransitionDuration
  • --pf-t--global--motion--duration--fade--short
  • --pf-t--global--motion--duration--sm
  • --pf-t--global--duration--100
  • 100ms
.pf-v6-c-button--pf-v6-c-button--m-secondary__icon--Color
(In light theme) #0066cc
  • --pf-v6-c-button--m-secondary__icon--Color
  • --pf-t--global--icon--color--brand--default
  • --pf-t--global--color--brand--default
  • --pf-t--global--color--brand--200
  • --pf-t--color--blue--50
  • #0066cc
.pf-v6-c-button--pf-v6-c-button--m-secondary--hover--Color
(In light theme) #004d99
  • --pf-v6-c-button--m-secondary--hover--Color
  • --pf-t--global--text--color--brand--hover
  • --pf-t--global--color--brand--hover
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-button--pf-v6-c-button--m-secondary--hover--BorderColor
(In light theme) #004d99
  • --pf-v6-c-button--m-secondary--hover--BorderColor
  • --pf-t--global--border--color--brand--hover
  • --pf-t--global--color--brand--hover
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-button--pf-v6-c-button--m-secondary--hover__icon--Color
(In light theme) #004d99
  • --pf-v6-c-button--m-secondary--hover__icon--Color
  • --pf-t--global--icon--color--brand--hover
  • --pf-t--global--color--brand--hover
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-button--pf-v6-c-button--m-secondary--m-clicked--Color
(In light theme) #004d99
  • --pf-v6-c-button--m-secondary--m-clicked--Color
  • --pf-t--global--text--color--brand--clicked
  • --pf-t--global--color--brand--clicked
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-button--pf-v6-c-button--m-secondary--m-clicked--BorderColor
(In light theme) #004d99
  • --pf-v6-c-button--m-secondary--m-clicked--BorderColor
  • --pf-t--global--border--color--brand--clicked
  • --pf-t--global--color--brand--clicked
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-button--pf-v6-c-button--m-secondary--m-clicked__icon--Color
(In light theme) #004d99
  • --pf-v6-c-button--m-secondary--m-clicked__icon--Color
  • --pf-t--global--icon--color--brand--clicked
  • --pf-t--global--color--brand--clicked
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-button--pf-v6-c-button--m-secondary--m-danger--Color
(In light theme) #b1380b
  • --pf-v6-c-button--m-secondary--m-danger--Color
  • --pf-t--global--text--color--status--danger--default
  • --pf-t--global--color--status--danger--default
  • --pf-t--global--color--status--danger--100
  • --pf-t--color--red-orange--60
  • #b1380b
.pf-v6-c-button--pf-v6-c-button--m-secondary--m-danger--BorderColor
(In light theme) #b1380b
  • --pf-v6-c-button--m-secondary--m-danger--BorderColor
  • --pf-t--global--border--color--status--danger--default
  • --pf-t--global--color--status--danger--default
  • --pf-t--global--color--status--danger--100
  • --pf-t--color--red-orange--60
  • #b1380b
.pf-v6-c-button--pf-v6-c-button--m-secondary--m-danger__icon--Color
(In light theme) #b1380b
  • --pf-v6-c-button--m-secondary--m-danger__icon--Color
  • --pf-t--global--icon--color--status--danger--default
  • --pf-t--global--color--status--danger--default
  • --pf-t--global--color--status--danger--100
  • --pf-t--color--red-orange--60
  • #b1380b
.pf-v6-c-button--pf-v6-c-button--m-secondary--m-danger--hover--Color
(In light theme) #731f00
  • --pf-v6-c-button--m-secondary--m-danger--hover--Color
  • --pf-t--global--text--color--status--danger--hover
  • --pf-t--global--color--status--danger--hover
  • --pf-t--global--color--status--danger--200
  • --pf-t--color--red-orange--70
  • #731f00
.pf-v6-c-button--pf-v6-c-button--m-secondary--m-danger--hover--BorderColor
(In light theme) #731f00
  • --pf-v6-c-button--m-secondary--m-danger--hover--BorderColor
  • --pf-t--global--border--color--status--danger--hover
  • --pf-t--global--color--status--danger--hover
  • --pf-t--global--color--status--danger--200
  • --pf-t--color--red-orange--70
  • #731f00
.pf-v6-c-button--pf-v6-c-button--m-secondary--m-danger--hover__icon--Color
(In light theme) #731f00
  • --pf-v6-c-button--m-secondary--m-danger--hover__icon--Color
  • --pf-t--global--icon--color--status--danger--hover
  • --pf-t--global--color--status--danger--hover
  • --pf-t--global--color--status--danger--200
  • --pf-t--color--red-orange--70
  • #731f00
.pf-v6-c-button--pf-v6-c-button--m-secondary--m-danger--m-clicked--Color
(In light theme) #731f00
  • --pf-v6-c-button--m-secondary--m-danger--m-clicked--Color
  • --pf-t--global--text--color--status--danger--clicked
  • --pf-t--global--color--status--danger--clicked
  • --pf-t--global--color--status--danger--200
  • --pf-t--color--red-orange--70
  • #731f00
.pf-v6-c-button--pf-v6-c-button--m-secondary--m-danger--m-clicked--BorderColor
(In light theme) #731f00
  • --pf-v6-c-button--m-secondary--m-danger--m-clicked--BorderColor
  • --pf-t--global--border--color--status--danger--clicked
  • --pf-t--global--color--status--danger--clicked
  • --pf-t--global--color--status--danger--200
  • --pf-t--color--red-orange--70
  • #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--m-secondary--m-danger--m-clicked__icon--Color
  • --pf-t--global--icon--color--status--danger--clicked
  • --pf-t--global--color--status--danger--clicked
  • --pf-t--global--color--status--danger--200
  • --pf-t--color--red-orange--70
  • #731f00
.pf-v6-c-button--pf-v6-c-button--m-tertiary--Color
(In light theme) #0066cc
  • --pf-v6-c-button--m-tertiary--Color
  • --pf-t--global--text--color--brand--default
  • --pf-t--global--color--brand--default
  • --pf-t--global--color--brand--200
  • --pf-t--color--blue--50
  • #0066cc
.pf-v6-c-button--pf-v6-c-button--m-tertiary--BorderColor
(In light theme) #c7c7c7
  • --pf-v6-c-button--m-tertiary--BorderColor
  • --pf-t--global--border--color--default
  • --pf-t--global--border--color--100
  • --pf-t--color--gray--30
  • #c7c7c7
.pf-v6-c-button--pf-v6-c-button--m-tertiary--TransitionDuration
100ms
  • --pf-v6-c-button--m-tertiary--TransitionDuration
  • --pf-t--global--motion--duration--fade--short
  • --pf-t--global--motion--duration--sm
  • --pf-t--global--duration--100
  • 100ms
.pf-v6-c-button--pf-v6-c-button--m-tertiary__icon--Color
(In light theme) #0066cc
  • --pf-v6-c-button--m-tertiary__icon--Color
  • --pf-t--global--icon--color--brand--default
  • --pf-t--global--color--brand--default
  • --pf-t--global--color--brand--200
  • --pf-t--color--blue--50
  • #0066cc
.pf-v6-c-button--pf-v6-c-button--m-tertiary--hover--Color
(In light theme) #004d99
  • --pf-v6-c-button--m-tertiary--hover--Color
  • --pf-t--global--text--color--brand--hover
  • --pf-t--global--color--brand--hover
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-button--pf-v6-c-button--m-tertiary--hover--BorderColor
(In light theme) #4394e5
  • --pf-v6-c-button--m-tertiary--hover--BorderColor
  • --pf-t--global--border--color--hover
  • --pf-t--global--color--brand--100
  • --pf-t--color--blue--40
  • #4394e5
.pf-v6-c-button--pf-v6-c-button--m-tertiary--hover__icon--Color
(In light theme) #004d99
  • --pf-v6-c-button--m-tertiary--hover__icon--Color
  • --pf-t--global--icon--color--brand--hover
  • --pf-t--global--color--brand--hover
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-button--pf-v6-c-button--m-tertiary--m-clicked--Color
(In light theme) #004d99
  • --pf-v6-c-button--m-tertiary--m-clicked--Color
  • --pf-t--global--text--color--brand--clicked
  • --pf-t--global--color--brand--clicked
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-button--pf-v6-c-button--m-tertiary--m-clicked--BorderColor
(In light theme) #0066cc
  • --pf-v6-c-button--m-tertiary--m-clicked--BorderColor
  • --pf-t--global--border--color--clicked
  • --pf-t--global--color--brand--200
  • --pf-t--color--blue--50
  • #0066cc
.pf-v6-c-button--pf-v6-c-button--m-tertiary--m-clicked__icon--Color
(In light theme) #004d99
  • --pf-v6-c-button--m-tertiary--m-clicked__icon--Color
  • --pf-t--global--icon--color--brand--clicked
  • --pf-t--global--color--brand--clicked
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-button--pf-v6-c-button--m-link--BorderRadius
6px
  • --pf-v6-c-button--m-link--BorderRadius
  • --pf-t--global--border--radius--small
  • --pf-t--global--border--radius--200
  • 6px
.pf-v6-c-button--pf-v6-c-button--m-link--PaddingInlineEnd
0.5rem
  • --pf-v6-c-button--m-link--PaddingInlineEnd
  • --pf-t--global--spacer--action--horizontal--plain--default
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-button--pf-v6-c-button--m-link--PaddingInlineStart
0.5rem
  • --pf-v6-c-button--m-link--PaddingInlineStart
  • --pf-t--global--spacer--action--horizontal--plain--default
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-button--pf-v6-c-button--m-link--Color
(In light theme) #0066cc
  • --pf-v6-c-button--m-link--Color
  • --pf-t--global--text--color--brand--default
  • --pf-t--global--color--brand--default
  • --pf-t--global--color--brand--200
  • --pf-t--color--blue--50
  • #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--m-link--BackgroundColor
  • --pf-t--global--background--color--action--plain--default
  • 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--m-link__icon--Color
  • --pf-t--global--icon--color--brand--default
  • --pf-t--global--color--brand--default
  • --pf-t--global--color--brand--200
  • --pf-t--color--blue--50
  • #0066cc
.pf-v6-c-button--pf-v6-c-button--m-link--hover--Color
(In light theme) #004d99
  • --pf-v6-c-button--m-link--hover--Color
  • --pf-t--global--text--color--brand--hover
  • --pf-t--global--color--brand--hover
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #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--m-link--hover--BackgroundColor
  • --pf-t--global--background--color--action--plain--hover
  • --pf-t--global--background--color--600
  • 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--m-link--hover__icon--Color
  • --pf-t--global--text--color--brand--hover
  • --pf-t--global--color--brand--hover
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-button--pf-v6-c-button--m-link--m-clicked--Color
(In light theme) #004d99
  • --pf-v6-c-button--m-link--m-clicked--Color
  • --pf-t--global--text--color--brand--clicked
  • --pf-t--global--color--brand--clicked
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #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--m-link--m-clicked--BackgroundColor
  • --pf-t--global--background--color--action--plain--clicked
  • --pf-t--global--background--color--600
  • 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--m-link--m-clicked__icon--Color
  • --pf-t--global--text--color--brand--clicked
  • --pf-t--global--color--brand--clicked
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-button--pf-v6-c-button--m-link--m-small--PaddingInlineEnd
0.25rem
  • --pf-v6-c-button--m-link--m-small--PaddingInlineEnd
  • --pf-t--global--spacer--action--horizontal--plain--compact
  • --pf-t--global--spacer--xs
  • --pf-t--global--spacer--100
  • 0.25rem
.pf-v6-c-button--pf-v6-c-button--m-link--m-small--PaddingInlineStart
0.25rem
  • --pf-v6-c-button--m-link--m-small--PaddingInlineStart
  • --pf-t--global--spacer--action--horizontal--plain--compact
  • --pf-t--global--spacer--xs
  • --pf-t--global--spacer--100
  • 0.25rem
.pf-v6-c-button--pf-v6-c-button--m-link--m-danger--Color
(In light theme) #b1380b
  • --pf-v6-c-button--m-link--m-danger--Color
  • --pf-t--global--text--color--status--danger--default
  • --pf-t--global--color--status--danger--default
  • --pf-t--global--color--status--danger--100
  • --pf-t--color--red-orange--60
  • #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--m-link--m-danger--BackgroundColor
  • --pf-t--global--background--color--action--plain--default
  • 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--m-link--m-danger__icon--Color
  • --pf-t--global--text--color--status--danger--default
  • --pf-t--global--color--status--danger--default
  • --pf-t--global--color--status--danger--100
  • --pf-t--color--red-orange--60
  • #b1380b
.pf-v6-c-button--pf-v6-c-button--m-link--m-danger--hover--Color
(In light theme) #731f00
  • --pf-v6-c-button--m-link--m-danger--hover--Color
  • --pf-t--global--text--color--status--danger--hover
  • --pf-t--global--color--status--danger--hover
  • --pf-t--global--color--status--danger--200
  • --pf-t--color--red-orange--70
  • #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--m-link--m-danger--hover--BackgroundColor
  • --pf-t--global--background--color--action--plain--hover
  • --pf-t--global--background--color--600
  • 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--m-link--m-danger--hover__icon--Color
  • --pf-t--global--text--color--status--danger--hover
  • --pf-t--global--color--status--danger--hover
  • --pf-t--global--color--status--danger--200
  • --pf-t--color--red-orange--70
  • #731f00
.pf-v6-c-button--pf-v6-c-button--m-link--m-danger--m-clicked--Color
(In light theme) #731f00
  • --pf-v6-c-button--m-link--m-danger--m-clicked--Color
  • --pf-t--global--text--color--status--danger--clicked
  • --pf-t--global--color--status--danger--clicked
  • --pf-t--global--color--status--danger--200
  • --pf-t--color--red-orange--70
  • #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--m-link--m-danger--m-clicked--BackgroundColor
  • --pf-t--global--background--color--action--plain--clicked
  • --pf-t--global--background--color--600
  • 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--m-link--m-danger--m-clicked__icon--Color
  • --pf-t--global--text--color--status--danger--clicked
  • --pf-t--global--color--status--danger--clicked
  • --pf-t--global--color--status--danger--200
  • --pf-t--color--red-orange--70
  • #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--m-link--m-inline--TextDecorationLine
  • --pf-t--global--text-decoration--link--line--default
  • --pf-t--global--text-decoration--line--200
  • underline
.pf-v6-c-button--pf-v6-c-button--m-link--m-inline--TextDecorationStyle
solid
  • --pf-v6-c-button--m-link--m-inline--TextDecorationStyle
  • --pf-t--global--text-decoration--link--style--default
  • --pf-t--global--text-decoration--style--100
  • solid
.pf-v6-c-button--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine
underline
  • --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine
  • --pf-t--global--text-decoration--link--line--hover
  • --pf-t--global--text-decoration--line--200
  • underline
.pf-v6-c-button--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle
solid
  • --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle
  • --pf-t--global--text-decoration--link--style--hover
  • --pf-t--global--text-decoration--style--100
  • solid
.pf-v6-c-button--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart
0.25rem
  • --pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart
  • --pf-t--global--spacer--xs
  • --pf-t--global--spacer--100
  • 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--m-link--m-inline--m-in-progress--PaddingInlineStart
  • calc(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart + 1rem + --pf-t--global--spacer--sm)
  • calc(--pf-t--global--spacer--xs + 1rem + --pf-t--global--spacer--200)
  • calc(--pf-t--global--spacer--100 + 1rem + 0.5rem)
  • 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--m-link--m-inline--disabled--Color
  • --pf-t--global--text--color--disabled
  • --pf-t--global--color--disabled--200
  • --pf-t--color--gray--40
  • #a3a3a3
.pf-v6-c-button--pf-v6-c-button--m-link--m-inline--disabled__icon--Color
(In light theme) #a3a3a3
  • --pf-v6-c-button--m-link--m-inline--disabled__icon--Color
  • --pf-t--global--icon--color--disabled
  • --pf-t--global--color--disabled--200
  • --pf-t--color--gray--40
  • #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--span--m-link--m-inline__icon--m-start--MarginInlineEnd
  • --pf-t--global--spacer--gap--text-to-element--default
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 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--span--m-link--m-inline__icon--m-end--MarginInlineStart
  • --pf-t--global--spacer--gap--text-to-element--default
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-button--pf-v6-c-button--m-link--m-inline--Color
(In light theme) #0066cc
  • --pf-v6-c-button--m-link--m-inline--Color
  • --pf-t--global--text--color--brand--default
  • --pf-t--global--color--brand--default
  • --pf-t--global--color--brand--200
  • --pf-t--color--blue--50
  • #0066cc
.pf-v6-c-button--pf-v6-c-button--m-link--m-inline__icon--Color
(In light theme) #0066cc
  • --pf-v6-c-button--m-link--m-inline__icon--Color
  • --pf-t--global--icon--color--brand--default
  • --pf-t--global--color--brand--default
  • --pf-t--global--color--brand--200
  • --pf-t--color--blue--50
  • #0066cc
.pf-v6-c-button--pf-v6-c-button--m-link--m-inline--TextDecorationColor
currentcolor
.pf-v6-c-button--pf-v6-c-button--m-link--m-inline--hover--Color
(In light theme) #004d99
  • --pf-v6-c-button--m-link--m-inline--hover--Color
  • --pf-t--global--text--color--brand--hover
  • --pf-t--global--color--brand--hover
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-button--pf-v6-c-button--m-link--m-inline--hover__icon--Color
(In light theme) #004d99
  • --pf-v6-c-button--m-link--m-inline--hover__icon--Color
  • --pf-t--global--icon--color--brand--hover
  • --pf-t--global--color--brand--hover
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-button--pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor
currentcolor
.pf-v6-c-button--pf-v6-c-button--m-plain--BorderRadius
6px
  • --pf-v6-c-button--m-plain--BorderRadius
  • --pf-t--global--border--radius--small
  • --pf-t--global--border--radius--200
  • 6px
.pf-v6-c-button--pf-v6-c-button--m-plain--PaddingInlineEnd
0.5rem
  • --pf-v6-c-button--m-plain--PaddingInlineEnd
  • --pf-t--global--spacer--action--horizontal--plain--default
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-button--pf-v6-c-button--m-plain--PaddingInlineStart
0.5rem
  • --pf-v6-c-button--m-plain--PaddingInlineStart
  • --pf-t--global--spacer--action--horizontal--plain--default
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-button--pf-v6-c-button--m-plain--Color
(In light theme) #1f1f1f
  • --pf-v6-c-button--m-plain--Color
  • --pf-t--global--icon--color--regular
  • --pf-t--global--icon--color--100
  • --pf-t--color--gray--90
  • #1f1f1f
.pf-v6-c-button--pf-v6-c-button--m-plain__icon--Color
(In light theme) #151515
  • --pf-v6-c-button--m-plain__icon--Color
  • --pf-t--global--text--color--regular
  • --pf-t--global--text--color--100
  • --pf-t--color--gray--95
  • #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--m-plain--BackgroundColor
  • --pf-t--global--background--color--action--plain--default
  • 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--m-plain--hover--Color
  • --pf-t--global--icon--color--regular
  • --pf-t--global--icon--color--100
  • --pf-t--color--gray--90
  • #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--m-plain--hover--BackgroundColor
  • --pf-t--global--background--color--action--plain--hover
  • --pf-t--global--background--color--600
  • 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--m-plain--m-clicked--Color
  • --pf-t--global--icon--color--regular
  • --pf-t--global--icon--color--100
  • --pf-t--color--gray--90
  • #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--m-plain--m-clicked--BackgroundColor
  • --pf-t--global--background--color--action--plain--clicked
  • --pf-t--global--background--color--600
  • 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--m-plain--disabled--Color
  • --pf-t--global--text--color--disabled
  • --pf-t--global--color--disabled--200
  • --pf-t--color--gray--40
  • #a3a3a3
.pf-v6-c-button--pf-v6-c-button--m-plain--disabled__icon--Color
(In light theme) #a3a3a3
  • --pf-v6-c-button--m-plain--disabled__icon--Color
  • --pf-t--global--icon--color--disabled
  • --pf-t--global--color--disabled--200
  • --pf-t--color--gray--40
  • #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--m-plain--m-small--PaddingInlineEnd
  • --pf-t--global--spacer--action--horizontal--plain--compact
  • --pf-t--global--spacer--xs
  • --pf-t--global--spacer--100
  • 0.25rem
.pf-v6-c-button--pf-v6-c-button--m-plain--m-small--PaddingInlineStart
0.25rem
  • --pf-v6-c-button--m-plain--m-small--PaddingInlineStart
  • --pf-t--global--spacer--action--horizontal--plain--compact
  • --pf-t--global--spacer--xs
  • --pf-t--global--spacer--100
  • 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--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--m-plain--m-no-padding__icon--Color
  • --pf-t--global--icon--color--subtle
  • --pf-t--global--icon--color--200
  • --pf-t--color--gray--50
  • #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--m-plain--m-no-padding--hover__icon--Color
  • --pf-t--global--icon--color--regular
  • --pf-t--global--icon--color--100
  • --pf-t--color--gray--90
  • #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__progress--Color
  • --pf-v6-c-button__icon--Color
  • --pf-t--global--icon--color--regular
  • --pf-t--global--icon--color--100
  • --pf-t--color--gray--90
  • #1f1f1f
.pf-v6-c-button--pf-v6-c-button--m-control--BorderRadius
6px
  • --pf-v6-c-button--m-control--BorderRadius
  • --pf-t--global--border--radius--small
  • --pf-t--global--border--radius--200
  • 6px
.pf-v6-c-button--pf-v6-c-button--m-control--PaddingInlineStart
1rem
  • --pf-v6-c-button--m-control--PaddingInlineStart
  • --pf-t--global--spacer--control--horizontal--default
  • --pf-t--global--spacer--md
  • --pf-t--global--spacer--300
  • 1rem
.pf-v6-c-button--pf-v6-c-button--m-control--PaddingInlineEnd
1rem
  • --pf-v6-c-button--m-control--PaddingInlineEnd
  • --pf-t--global--spacer--control--horizontal--default
  • --pf-t--global--spacer--md
  • --pf-t--global--spacer--300
  • 1rem
.pf-v6-c-button--pf-v6-c-button--m-control--Color
(In light theme) #151515
  • --pf-v6-c-button--m-control--Color
  • --pf-t--global--text--color--regular
  • --pf-t--global--text--color--100
  • --pf-t--color--gray--95
  • #151515
.pf-v6-c-button--pf-v6-c-button--m-control--BackgroundColor
(In light theme) #ffffff
  • --pf-v6-c-button--m-control--BackgroundColor
  • --pf-t--global--background--color--control--default
  • --pf-t--global--background--color--primary--default
  • --pf-t--global--background--color--100
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button--pf-v6-c-button--m-control--BorderColor
(In light theme) #c7c7c7
  • --pf-v6-c-button--m-control--BorderColor
  • --pf-t--global--border--color--default
  • --pf-t--global--border--color--100
  • --pf-t--color--gray--30
  • #c7c7c7
.pf-v6-c-button--pf-v6-c-button--m-control--BorderWidth
1px
  • --pf-v6-c-button--m-control--BorderWidth
  • --pf-t--global--border--width--control--default
  • --pf-t--global--border--width--100
  • 1px
.pf-v6-c-button--pf-v6-c-button--m-control__icon--Color
(In light theme) #1f1f1f
  • --pf-v6-c-button--m-control__icon--Color
  • --pf-t--global--icon--color--regular
  • --pf-t--global--icon--color--100
  • --pf-t--color--gray--90
  • #1f1f1f
.pf-v6-c-button--pf-v6-c-button--m-control--hover--Color
(In light theme) #151515
  • --pf-v6-c-button--m-control--hover--Color
  • --pf-t--global--text--color--regular
  • --pf-t--global--text--color--100
  • --pf-t--color--gray--95
  • #151515
.pf-v6-c-button--pf-v6-c-button--m-control--hover--BackgroundColor
(In light theme) #ffffff
  • --pf-v6-c-button--m-control--hover--BackgroundColor
  • --pf-t--global--background--color--control--default
  • --pf-t--global--background--color--primary--default
  • --pf-t--global--background--color--100
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button--pf-v6-c-button--m-control--hover--BorderColor
(In light theme) #4394e5
  • --pf-v6-c-button--m-control--hover--BorderColor
  • --pf-t--global--border--color--hover
  • --pf-t--global--color--brand--100
  • --pf-t--color--blue--40
  • #4394e5
.pf-v6-c-button--pf-v6-c-button--m-control--hover--BorderWidth
1px
  • --pf-v6-c-button--m-control--hover--BorderWidth
  • --pf-t--global--border--width--control--hover
  • --pf-t--global--border--width--100
  • 1px
.pf-v6-c-button--pf-v6-c-button--m-control--hover__icon--Color
(In light theme) #1f1f1f
  • --pf-v6-c-button--m-control--hover__icon--Color
  • --pf-t--global--icon--color--regular
  • --pf-t--global--icon--color--100
  • --pf-t--color--gray--90
  • #1f1f1f
.pf-v6-c-button--pf-v6-c-button--m-control--m-clicked--Color
(In light theme) #151515
  • --pf-v6-c-button--m-control--m-clicked--Color
  • --pf-t--global--text--color--regular
  • --pf-t--global--text--color--100
  • --pf-t--color--gray--95
  • #151515
.pf-v6-c-button--pf-v6-c-button--m-control--m-clicked--BackgroundColor
(In light theme) #ffffff
  • --pf-v6-c-button--m-control--m-clicked--BackgroundColor
  • --pf-t--global--background--color--control--default
  • --pf-t--global--background--color--primary--default
  • --pf-t--global--background--color--100
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button--pf-v6-c-button--m-control--m-clicked--BorderColor
(In light theme) #0066cc
  • --pf-v6-c-button--m-control--m-clicked--BorderColor
  • --pf-t--global--border--color--clicked
  • --pf-t--global--color--brand--200
  • --pf-t--color--blue--50
  • #0066cc
.pf-v6-c-button--pf-v6-c-button--m-control--m-clicked--BorderWidth
2px
  • --pf-v6-c-button--m-control--m-clicked--BorderWidth
  • --pf-t--global--border--width--control--clicked
  • --pf-t--global--border--width--200
  • 2px
.pf-v6-c-button--pf-v6-c-button--m-control--m-clicked__icon--Color
(In light theme) #1f1f1f
  • --pf-v6-c-button--m-control--m-clicked__icon--Color
  • --pf-t--global--icon--color--regular
  • --pf-t--global--icon--color--100
  • --pf-t--color--gray--90
  • #1f1f1f
.pf-v6-c-button--pf-v6-c-button--m-control--m-small--PaddingInlineEnd
0.5rem
  • --pf-v6-c-button--m-control--m-small--PaddingInlineEnd
  • --pf-t--global--spacer--control--horizontal--compact
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-button--pf-v6-c-button--m-control--m-small--PaddingInlineStart
0.5rem
  • --pf-v6-c-button--m-control--m-small--PaddingInlineStart
  • --pf-t--global--spacer--control--horizontal--compact
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-button--pf-v6-c-button--m-stateful--BorderRadius
6px
  • --pf-v6-c-button--m-stateful--BorderRadius
  • --pf-t--global--border--radius--small
  • --pf-t--global--border--radius--200
  • 6px
.pf-v6-c-button--pf-v6-c-button--m-stateful--PaddingInlineStart
1rem
  • --pf-v6-c-button--m-stateful--PaddingInlineStart
  • --pf-t--global--spacer--control--horizontal--default
  • --pf-t--global--spacer--md
  • --pf-t--global--spacer--300
  • 1rem
.pf-v6-c-button--pf-v6-c-button--m-stateful--PaddingInlineEnd
1rem
  • --pf-v6-c-button--m-stateful--PaddingInlineEnd
  • --pf-t--global--spacer--control--horizontal--default
  • --pf-t--global--spacer--md
  • --pf-t--global--spacer--300
  • 1rem
.pf-v6-c-button--pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd
0.5rem
  • --pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd
  • --pf-t--global--spacer--control--horizontal--compact
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-button--pf-v6-c-button--m-stateful--m-small--PaddingInlineStart
0.5rem
  • --pf-v6-c-button--m-stateful--m-small--PaddingInlineStart
  • --pf-t--global--spacer--control--horizontal--compact
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-button--pf-v6-c-button--m-read--BackgroundColor
(In light theme) #ffffff
  • --pf-v6-c-button--m-read--BackgroundColor
  • --pf-t--global--background--color--control--default
  • --pf-t--global--background--color--primary--default
  • --pf-t--global--background--color--100
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button--pf-v6-c-button--m-read--BorderColor
(In light theme) #c7c7c7
  • --pf-v6-c-button--m-read--BorderColor
  • --pf-t--global--border--color--default
  • --pf-t--global--border--color--100
  • --pf-t--color--gray--30
  • #c7c7c7
.pf-v6-c-button--pf-v6-c-button--m-read--hover--BackgroundColor
(In light theme) #ffffff
  • --pf-v6-c-button--m-read--hover--BackgroundColor
  • --pf-t--global--background--color--control--default
  • --pf-t--global--background--color--primary--default
  • --pf-t--global--background--color--100
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button--pf-v6-c-button--m-read--hover--BorderColor
(In light theme) #4394e5
  • --pf-v6-c-button--m-read--hover--BorderColor
  • --pf-t--global--border--color--hover
  • --pf-t--global--color--brand--100
  • --pf-t--color--blue--40
  • #4394e5
.pf-v6-c-button--pf-v6-c-button--m-read--m-clicked--BackgroundColor
(In light theme) #ffffff
  • --pf-v6-c-button--m-read--m-clicked--BackgroundColor
  • --pf-t--global--background--color--control--default
  • --pf-t--global--background--color--primary--default
  • --pf-t--global--background--color--100
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button--pf-v6-c-button--m-read--m-clicked--BorderColor
(In light theme) #0066cc
  • --pf-v6-c-button--m-read--m-clicked--BorderColor
  • --pf-t--global--border--color--clicked
  • --pf-t--global--color--brand--200
  • --pf-t--color--blue--50
  • #0066cc
.pf-v6-c-button--pf-v6-c-button--m-unread--Color
(In light theme) #ffffff
  • --pf-v6-c-button--m-unread--Color
  • --pf-t--global--text--color--status--unread--on-default--default
  • --pf-t--global--text--color--inverse
  • --pf-t--global--text--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button--pf-v6-c-button--m-unread--BackgroundColor
(In light theme) #0066cc
  • --pf-v6-c-button--m-unread--BackgroundColor
  • --pf-t--global--color--status--unread--default
  • --pf-t--global--color--brand--default
  • --pf-t--global--color--brand--200
  • --pf-t--color--blue--50
  • #0066cc
.pf-v6-c-button--pf-v6-c-button--m-unread__icon--Color
(In light theme) #ffffff
  • --pf-v6-c-button--m-unread__icon--Color
  • --pf-t--global--icon--color--status--unread--on-default--default
  • --pf-t--global--icon--color--inverse
  • --pf-t--global--icon--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button--pf-v6-c-button--m-unread--hover--Color
(In light theme) #ffffff
  • --pf-v6-c-button--m-unread--hover--Color
  • --pf-t--global--text--color--status--unread--on-default--hover
  • --pf-t--global--text--color--inverse
  • --pf-t--global--text--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button--pf-v6-c-button--m-unread--hover--BackgroundColor
(In light theme) #004d99
  • --pf-v6-c-button--m-unread--hover--BackgroundColor
  • --pf-t--global--color--status--unread--hover
  • --pf-t--global--color--brand--hover
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-button--pf-v6-c-button--m-unread--hover__icon--Color
(In light theme) #ffffff
  • --pf-v6-c-button--m-unread--hover__icon--Color
  • --pf-t--global--icon--color--status--unread--on-default--hover
  • --pf-t--global--icon--color--inverse
  • --pf-t--global--icon--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button--pf-v6-c-button--m-unread--m-clicked--Color
(In light theme) #ffffff
  • --pf-v6-c-button--m-unread--m-clicked--Color
  • --pf-t--global--text--color--status--unread--on-default--clicked
  • --pf-t--global--text--color--inverse
  • --pf-t--global--text--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button--pf-v6-c-button--m-unread--m-clicked--BackgroundColor
(In light theme) #004d99
  • --pf-v6-c-button--m-unread--m-clicked--BackgroundColor
  • --pf-t--global--color--status--unread--clicked
  • --pf-t--global--color--brand--clicked
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-button--pf-v6-c-button--m-unread--m-clicked__icon--Color
(In light theme) #ffffff
  • --pf-v6-c-button--m-unread--m-clicked__icon--Color
  • --pf-t--global--icon--color--status--unread--on-default--clicked
  • --pf-t--global--icon--color--inverse
  • --pf-t--global--icon--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button--pf-v6-c-button--m-attention--Color
(In light theme) #ffffff
  • --pf-v6-c-button--m-attention--Color
  • --pf-t--global--text--color--status--unread--on-attention--default
  • --pf-t--global--text--color--inverse
  • --pf-t--global--text--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button--pf-v6-c-button--m-attention--BackgroundColor
(In light theme) #b1380b
  • --pf-v6-c-button--m-attention--BackgroundColor
  • --pf-t--global--color--status--unread--attention--default
  • --pf-t--global--color--status--danger--default
  • --pf-t--global--color--status--danger--100
  • --pf-t--color--red-orange--60
  • #b1380b
.pf-v6-c-button--pf-v6-c-button--m-attention__icon--Color
(In light theme) #ffffff
  • --pf-v6-c-button--m-attention__icon--Color
  • --pf-t--global--icon--color--status--unread--on-attention--default
  • --pf-t--global--icon--color--inverse
  • --pf-t--global--icon--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button--pf-v6-c-button--m-attention--hover--Color
(In light theme) #ffffff
  • --pf-v6-c-button--m-attention--hover--Color
  • --pf-t--global--text--color--status--unread--on-attention--hover
  • --pf-t--global--text--color--inverse
  • --pf-t--global--text--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button--pf-v6-c-button--m-attention--hover--BackgroundColor
(In light theme) #731f00
  • --pf-v6-c-button--m-attention--hover--BackgroundColor
  • --pf-t--global--color--status--unread--attention--hover
  • --pf-t--global--color--status--danger--hover
  • --pf-t--global--color--status--danger--200
  • --pf-t--color--red-orange--70
  • #731f00
.pf-v6-c-button--pf-v6-c-button--m-attention--hover__icon--Color
(In light theme) #ffffff
  • --pf-v6-c-button--m-attention--hover__icon--Color
  • --pf-t--global--icon--color--status--unread--on-attention--hover
  • --pf-t--global--icon--color--inverse
  • --pf-t--global--icon--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button--pf-v6-c-button--m-attention--m-clicked--Color
(In light theme) #ffffff
  • --pf-v6-c-button--m-attention--m-clicked--Color
  • --pf-t--global--text--color--status--unread--on-attention--clicked
  • --pf-t--global--text--color--inverse
  • --pf-t--global--text--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button--pf-v6-c-button--m-attention--m-clicked--BackgroundColor
(In light theme) #731f00
  • --pf-v6-c-button--m-attention--m-clicked--BackgroundColor
  • --pf-t--global--color--status--unread--attention--clicked
  • --pf-t--global--color--status--danger--clicked
  • --pf-t--global--color--status--danger--200
  • --pf-t--color--red-orange--70
  • #731f00
.pf-v6-c-button--pf-v6-c-button--m-attention--m-clicked__icon--Color
(In light theme) #ffffff
  • --pf-v6-c-button--m-attention--m-clicked__icon--Color
  • --pf-t--global--icon--color--status--unread--on-attention--clicked
  • --pf-t--global--icon--color--inverse
  • --pf-t--global--icon--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button--pf-v6-c-button--m-warning--Color
(In light theme) #151515
  • --pf-v6-c-button--m-warning--Color
  • --pf-t--global--text--color--status--on-warning--default
  • --pf-t--global--text--color--regular
  • --pf-t--global--text--color--100
  • --pf-t--color--gray--95
  • #151515
.pf-v6-c-button--pf-v6-c-button--m-warning--BackgroundColor
(In light theme) #ffcc17
  • --pf-v6-c-button--m-warning--BackgroundColor
  • --pf-t--global--color--status--warning--default
  • --pf-t--global--color--status--warning--100
  • --pf-t--color--yellow--30
  • #ffcc17
.pf-v6-c-button--pf-v6-c-button--m-warning__icon--Color
(In light theme) #1f1f1f
  • --pf-v6-c-button--m-warning__icon--Color
  • --pf-t--global--icon--color--status--on-warning--default
  • --pf-t--global--icon--color--regular
  • --pf-t--global--icon--color--100
  • --pf-t--color--gray--90
  • #1f1f1f
.pf-v6-c-button--pf-v6-c-button--m-warning--hover--Color
(In light theme) #151515
  • --pf-v6-c-button--m-warning--hover--Color
  • --pf-t--global--text--color--status--on-warning--hover
  • --pf-t--global--text--color--regular
  • --pf-t--global--text--color--100
  • --pf-t--color--gray--95
  • #151515
.pf-v6-c-button--pf-v6-c-button--m-warning--hover--BackgroundColor
(In light theme) #dca614
  • --pf-v6-c-button--m-warning--hover--BackgroundColor
  • --pf-t--global--color--status--warning--hover
  • --pf-t--global--color--status--warning--200
  • --pf-t--color--yellow--40
  • #dca614
.pf-v6-c-button--pf-v6-c-button--m-warning--hover__icon--Color
(In light theme) #1f1f1f
  • --pf-v6-c-button--m-warning--hover__icon--Color
  • --pf-t--global--icon--color--status--on-warning--hover
  • --pf-t--global--icon--color--regular
  • --pf-t--global--icon--color--100
  • --pf-t--color--gray--90
  • #1f1f1f
.pf-v6-c-button--pf-v6-c-button--m-warning--m-clicked--Color
(In light theme) #151515
  • --pf-v6-c-button--m-warning--m-clicked--Color
  • --pf-t--global--text--color--status--on-warning--clicked
  • --pf-t--global--text--color--regular
  • --pf-t--global--text--color--100
  • --pf-t--color--gray--95
  • #151515
.pf-v6-c-button--pf-v6-c-button--m-warning--m-clicked--BackgroundColor
(In light theme) #dca614
  • --pf-v6-c-button--m-warning--m-clicked--BackgroundColor
  • --pf-t--global--color--status--warning--clicked
  • --pf-t--global--color--status--warning--200
  • --pf-t--color--yellow--40
  • #dca614
.pf-v6-c-button--pf-v6-c-button--m-warning--m-clicked__icon--Color
(In light theme) #1f1f1f
  • --pf-v6-c-button--m-warning--m-clicked__icon--Color
  • --pf-t--global--icon--color--status--on-warning--clicked
  • --pf-t--global--icon--color--regular
  • --pf-t--global--icon--color--100
  • --pf-t--color--gray--90
  • #1f1f1f
.pf-v6-c-button--pf-v6-c-button--m-danger--Color
(In light theme) #ffffff
  • --pf-v6-c-button--m-danger--Color
  • --pf-t--global--text--color--status--on-danger--default
  • --pf-t--global--text--color--inverse
  • --pf-t--global--text--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button--pf-v6-c-button--m-danger--BackgroundColor
(In light theme) #b1380b
  • --pf-v6-c-button--m-danger--BackgroundColor
  • --pf-t--global--color--status--danger--default
  • --pf-t--global--color--status--danger--100
  • --pf-t--color--red-orange--60
  • #b1380b
.pf-v6-c-button--pf-v6-c-button--m-danger__icon--Color
(In light theme) #ffffff
  • --pf-v6-c-button--m-danger__icon--Color
  • --pf-t--global--icon--color--status--on-danger--default
  • --pf-t--global--icon--color--inverse
  • --pf-t--global--icon--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button--pf-v6-c-button--m-danger--hover--Color
(In light theme) #ffffff
  • --pf-v6-c-button--m-danger--hover--Color
  • --pf-t--global--text--color--status--on-danger--hover
  • --pf-t--global--text--color--inverse
  • --pf-t--global--text--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button--pf-v6-c-button--m-danger--hover--BackgroundColor
(In light theme) #731f00
  • --pf-v6-c-button--m-danger--hover--BackgroundColor
  • --pf-t--global--color--status--danger--hover
  • --pf-t--global--color--status--danger--200
  • --pf-t--color--red-orange--70
  • #731f00
.pf-v6-c-button--pf-v6-c-button--m-danger--hover__icon--Color
(In light theme) #ffffff
  • --pf-v6-c-button--m-danger--hover__icon--Color
  • --pf-t--global--icon--color--status--on-danger--hover
  • --pf-t--global--icon--color--inverse
  • --pf-t--global--icon--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button--pf-v6-c-button--m-danger--m-clicked--Color
(In light theme) #ffffff
  • --pf-v6-c-button--m-danger--m-clicked--Color
  • --pf-t--global--text--color--status--on-danger--clicked
  • --pf-t--global--icon--color--inverse
  • --pf-t--global--icon--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button--pf-v6-c-button--m-danger--m-clicked--BackgroundColor
(In light theme) #731f00
  • --pf-v6-c-button--m-danger--m-clicked--BackgroundColor
  • --pf-t--global--color--status--danger--clicked
  • --pf-t--global--color--status--danger--200
  • --pf-t--color--red-orange--70
  • #731f00
.pf-v6-c-button--pf-v6-c-button--m-danger--m-clicked__icon--Color
(In light theme) #ffffff
  • --pf-v6-c-button--m-danger--m-clicked__icon--Color
  • --pf-t--global--icon--color--status--on-danger--clicked
  • --pf-t--global--icon--color--inverse
  • --pf-t--global--icon--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button--pf-v6-c-button--m-display-lg--PaddingBlockStart
1rem
  • --pf-v6-c-button--m-display-lg--PaddingBlockStart
  • --pf-t--global--spacer--control--vertical--spacious
  • --pf-t--global--spacer--md
  • --pf-t--global--spacer--300
  • 1rem
.pf-v6-c-button--pf-v6-c-button--m-display-lg--PaddingInlineEnd
2rem
  • --pf-v6-c-button--m-display-lg--PaddingInlineEnd
  • --pf-t--global--spacer--action--horizontal--spacious
  • --pf-t--global--spacer--xl
  • --pf-t--global--spacer--500
  • 2rem
.pf-v6-c-button--pf-v6-c-button--m-display-lg--PaddingBlockEnd
1rem
  • --pf-v6-c-button--m-display-lg--PaddingBlockEnd
  • --pf-t--global--spacer--control--vertical--spacious
  • --pf-t--global--spacer--md
  • --pf-t--global--spacer--300
  • 1rem
.pf-v6-c-button--pf-v6-c-button--m-display-lg--PaddingInlineStart
2rem
  • --pf-v6-c-button--m-display-lg--PaddingInlineStart
  • --pf-t--global--spacer--action--horizontal--spacious
  • --pf-t--global--spacer--xl
  • --pf-t--global--spacer--500
  • 2rem
.pf-v6-c-button--pf-v6-c-button--m-display-lg--FontWeight
500
  • --pf-v6-c-button--m-display-lg--FontWeight
  • --pf-t--global--font--weight--body--bold
  • --pf-t--global--font--weight--200
  • 500
.pf-v6-c-button--pf-v6-c-button--m-link--m-display-lg--FontSize
1rem
  • --pf-v6-c-button--m-link--m-display-lg--FontSize
  • --pf-t--global--font--size--body--lg
  • --pf-t--global--font--size--md
  • --pf-t--global--font--size--300
  • 1rem
.pf-v6-c-button--pf-v6-c-button--m-small--PaddingBlockStart
0.25rem
  • --pf-v6-c-button--m-small--PaddingBlockStart
  • --pf-t--global--spacer--control--vertical--compact
  • --pf-t--global--spacer--xs
  • --pf-t--global--spacer--100
  • 0.25rem
.pf-v6-c-button--pf-v6-c-button--m-small--PaddingInlineEnd
1rem
  • --pf-v6-c-button--m-small--PaddingInlineEnd
  • --pf-t--global--spacer--action--horizontal--compact
  • --pf-t--global--spacer--md
  • --pf-t--global--spacer--300
  • 1rem
.pf-v6-c-button--pf-v6-c-button--m-small--PaddingBlockEnd
0.25rem
  • --pf-v6-c-button--m-small--PaddingBlockEnd
  • --pf-t--global--spacer--control--vertical--compact
  • --pf-t--global--spacer--xs
  • --pf-t--global--spacer--100
  • 0.25rem
.pf-v6-c-button--pf-v6-c-button--m-small--PaddingInlineStart
1rem
  • --pf-v6-c-button--m-small--PaddingInlineStart
  • --pf-t--global--spacer--action--horizontal--compact
  • --pf-t--global--spacer--md
  • --pf-t--global--spacer--300
  • 1rem
.pf-v6-c-button--pf-v6-c-button--disabled--Color
(In light theme) #4d4d4d
  • --pf-v6-c-button--disabled--Color
  • --pf-t--global--text--color--on-disabled
  • --pf-t--global--color--disabled--300
  • --pf-t--color--gray--60
  • #4d4d4d
.pf-v6-c-button--pf-v6-c-button--disabled--BackgroundColor
(In light theme) #c7c7c7
  • --pf-v6-c-button--disabled--BackgroundColor
  • --pf-t--global--background--color--disabled--default
  • --pf-t--global--color--disabled--100
  • --pf-t--color--gray--30
  • #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) #4d4d4d
  • --pf-v6-c-button--disabled__icon--Color
  • --pf-t--global--icon--color--on-disabled
  • --pf-t--global--color--disabled--300
  • --pf-t--color--gray--60
  • #4d4d4d
.pf-v6-c-button--pf-v6-c-button__icon--Color
(In light theme) #1f1f1f
  • --pf-v6-c-button__icon--Color
  • --pf-t--global--icon--color--regular
  • --pf-t--global--icon--color--100
  • --pf-t--color--gray--90
  • #1f1f1f
.pf-v6-c-button--pf-v6-c-button--hover__icon--Color
(In light theme) #1f1f1f
  • --pf-v6-c-button--hover__icon--Color
  • --pf-t--global--icon--color--regular
  • --pf-t--global--icon--color--100
  • --pf-t--color--gray--90
  • #1f1f1f
.pf-v6-c-button--pf-v6-c-button--m-clicked__icon--Color
(In light theme) #1f1f1f
  • --pf-v6-c-button--m-clicked__icon--Color
  • --pf-t--global--icon--color--regular
  • --pf-t--global--icon--color--100
  • --pf-t--color--gray--90
  • #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--m-notify__icon--AnimationDuration--notify
  • --pf-t--global--motion--duration--3xl
  • --pf-t--global--duration--600
  • 600ms
.pf-v6-c-button--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify
cubic-bezier(.4, 0, .2, 1)
  • --pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify
  • --pf-t--global--motion--timing-function--default
  • --pf-t--global--timing-function--200
  • cubic-bezier(.4, 0, .2, 1)
.pf-v6-c-button--pf-v6-c-button--m-favorite__icon--TransitionDuration
100ms
  • --pf-v6-c-button--m-favorite__icon--TransitionDuration
  • --pf-t--global--motion--duration--icon--default
  • --pf-t--global--motion--duration--sm
  • --pf-t--global--duration--100
  • 100ms
.pf-v6-c-button--pf-v6-c-button--m-favorite__icon--TransitionTimingFunction
cubic-bezier(.4, 0, .2, 1)
  • --pf-v6-c-button--m-favorite__icon--TransitionTimingFunction
  • --pf-t--global--motion--timing-function--default
  • --pf-t--global--timing-function--200
  • 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--m-favorited__icon--Color
  • --pf-t--global--color--favorite--default
  • --pf-t--global--color--favorite--100
  • --pf-t--color--yellow--30
  • #ffcc17
.pf-v6-c-button--pf-v6-c-button--m-favorited--hover__icon--Color
(In light theme) #dca614
  • --pf-v6-c-button--m-favorited--hover__icon--Color
  • --pf-t--global--color--favorite--hover
  • --pf-t--global--color--favorite--200
  • --pf-t--color--yellow--40
  • #dca614
.pf-v6-c-button--pf-v6-c-button--m-favorited__icon--AnimationDuration
200ms
  • --pf-v6-c-button--m-favorited__icon--AnimationDuration
  • --pf-t--global--motion--duration--icon--long
  • --pf-t--global--motion--duration--md
  • --pf-t--global--duration--200
  • 200ms
.pf-v6-c-button--pf-v6-c-button--m-favorited__icon--AnimationTimingFunction
cubic-bezier(.4, 0, .2, 1)
  • --pf-v6-c-button--m-favorited__icon--AnimationTimingFunction
  • --pf-t--global--motion--timing-function--default
  • --pf-t--global--timing-function--200
  • 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__icon--favorite--TransitionDuration
  • --pf-t--global--motion--duration--icon--default
  • --pf-t--global--motion--duration--sm
  • --pf-t--global--duration--100
  • 100ms
.pf-v6-c-button--pf-v6-c-button__progress--width
calc(1rem + 0.5rem)
  • --pf-v6-c-button__progress--width
  • calc(--pf-t--global--icon--size--lg + --pf-t--global--spacer--sm)
  • calc(--pf-t--global--icon--size--250 + --pf-t--global--spacer--200)
  • 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__progress--InsetInlineStart
  • --pf-t--global--spacer--control--horizontal--default
  • --pf-t--global--spacer--md
  • --pf-t--global--spacer--300
  • 1rem
.pf-v6-c-button--pf-v6-c-button--m-progress--PaddingInlineEnd
calc(1rem + calc(1rem + 0.5rem) / 2)
  • --pf-v6-c-button--m-progress--PaddingInlineEnd
  • calc(--pf-t--global--spacer--control--horizontal--default + --pf-v6-c-button__progress--width / 2)
  • calc(--pf-t--global--spacer--md + calc(--pf-t--global--icon--size--lg + --pf-t--global--spacer--sm) / 2)
  • calc(--pf-t--global--spacer--300 + calc(--pf-t--global--icon--size--250 + --pf-t--global--spacer--200) / 2)
  • 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--m-progress--PaddingInlineStart
  • calc(--pf-t--global--spacer--control--horizontal--default + --pf-v6-c-button__progress--width / 2)
  • calc(--pf-t--global--spacer--md + calc(--pf-t--global--icon--size--lg + --pf-t--global--spacer--sm) / 2)
  • calc(--pf-t--global--spacer--300 + calc(--pf-t--global--icon--size--250 + --pf-t--global--spacer--200) / 2)
  • calc(1rem + calc(1rem + 0.5rem) / 2)
.pf-v6-c-button--pf-v6-c-button--m-in-progress--PaddingInlineEnd
1rem
  • --pf-v6-c-button--m-in-progress--PaddingInlineEnd
  • --pf-t--global--spacer--control--horizontal--default
  • --pf-t--global--spacer--md
  • --pf-t--global--spacer--300
  • 1rem
.pf-v6-c-button--pf-v6-c-button--m-in-progress--PaddingInlineStart
calc(1rem + calc(1rem + 0.5rem))
  • --pf-v6-c-button--m-in-progress--PaddingInlineStart
  • calc(--pf-t--global--spacer--control--horizontal--default + --pf-v6-c-button__progress--width)
  • calc(--pf-t--global--spacer--md + calc(--pf-t--global--icon--size--lg + --pf-t--global--spacer--sm))
  • calc(--pf-t--global--spacer--300 + calc(--pf-t--global--icon--size--250 + --pf-t--global--spacer--200))
  • 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--m-in-progress--m-plain--Color
  • --pf-t--global--icon--color--brand--default
  • --pf-t--global--color--brand--default
  • --pf-t--global--color--brand--200
  • --pf-t--color--blue--50
  • #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--m-primary__c-badge--BorderColor
  • --pf-t--global--border--color--default
  • --pf-t--global--border--color--100
  • --pf-t--color--gray--30
  • #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--Color
  • --pf-v6-c-button--m-primary--Color
  • --pf-t--global--text--color--on-brand--default
  • --pf-t--global--text--color--inverse
  • --pf-t--global--text--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button.pf-m-primary--pf-v6-c-button--BackgroundColor
(In light theme) #0066cc
  • --pf-v6-c-button--BackgroundColor
  • --pf-v6-c-button--m-primary--BackgroundColor
  • --pf-t--global--color--brand--default
  • --pf-t--global--color--brand--200
  • --pf-t--color--blue--50
  • #0066cc
.pf-v6-c-button.pf-m-primary--pf-v6-c-button__icon--Color
(In light theme) #ffffff
  • --pf-v6-c-button__icon--Color
  • --pf-v6-c-button--m-primary__icon--Color
  • --pf-t--global--icon--color--on-brand--default
  • --pf-t--global--icon--color--inverse
  • --pf-t--global--icon--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button.pf-m-primary--pf-v6-c-button--hover--Color
(In light theme) #ffffff
  • --pf-v6-c-button--hover--Color
  • --pf-v6-c-button--m-primary--hover--Color
  • --pf-t--global--text--color--on-brand--hover
  • --pf-t--global--text--color--inverse
  • --pf-t--global--text--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button.pf-m-primary--pf-v6-c-button--hover--BackgroundColor
(In light theme) #004d99
  • --pf-v6-c-button--hover--BackgroundColor
  • --pf-v6-c-button--m-primary--hover--BackgroundColor
  • --pf-t--global--color--brand--hover
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-button.pf-m-primary--pf-v6-c-button--hover__icon--Color
(In light theme) #ffffff
  • --pf-v6-c-button--hover__icon--Color
  • --pf-v6-c-button--m-primary--hover__icon--Color
  • --pf-t--global--icon--color--on-brand--hover
  • --pf-t--global--icon--color--inverse
  • --pf-t--global--icon--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button.pf-m-primary--pf-v6-c-button--m-clicked--Color
(In light theme) #ffffff
  • --pf-v6-c-button--m-clicked--Color
  • --pf-v6-c-button--m-primary--m-clicked--Color
  • --pf-t--global--text--color--on-brand--clicked
  • --pf-t--global--text--color--inverse
  • --pf-t--global--text--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button.pf-m-primary--pf-v6-c-button--m-clicked--BackgroundColor
(In light theme) #004d99
  • --pf-v6-c-button--m-clicked--BackgroundColor
  • --pf-v6-c-button--m-primary--m-clicked--BackgroundColor
  • --pf-t--global--color--brand--clicked
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-button.pf-m-primary--pf-v6-c-button--m-clicked__icon--Color
(In light theme) #ffffff
  • --pf-v6-c-button--m-clicked__icon--Color
  • --pf-v6-c-button--m-primary--m-clicked__icon--Color
  • --pf-t--global--icon--color--on-brand--clicked
  • --pf-t--global--icon--color--inverse
  • --pf-t--global--icon--color--300
  • --pf-t--color--white
  • #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-badge--BorderColor
  • --pf-v6-c-button--m-primary__c-badge--BorderColor
  • --pf-t--global--border--color--default
  • --pf-t--global--border--color--100
  • --pf-t--color--gray--30
  • #c7c7c7
.pf-v6-c-button.pf-m-secondary--pf-v6-c-button--Color
(In light theme) #0066cc
  • --pf-v6-c-button--Color
  • --pf-v6-c-button--m-secondary--Color
  • --pf-t--global--text--color--brand--default
  • --pf-t--global--color--brand--default
  • --pf-t--global--color--brand--200
  • --pf-t--color--blue--50
  • #0066cc
.pf-v6-c-button.pf-m-secondary--pf-v6-c-button--BorderColor
(In light theme) #0066cc
  • --pf-v6-c-button--BorderColor
  • --pf-v6-c-button--m-secondary--BorderColor
  • --pf-t--global--border--color--brand--default
  • --pf-t--global--color--brand--default
  • --pf-t--global--color--brand--200
  • --pf-t--color--blue--50
  • #0066cc
.pf-v6-c-button.pf-m-secondary--pf-v6-c-button--TransitionDuration
100ms
  • --pf-v6-c-button--TransitionDuration
  • --pf-v6-c-button--m-secondary--TransitionDuration
  • --pf-t--global--motion--duration--fade--short
  • --pf-t--global--motion--duration--sm
  • --pf-t--global--duration--100
  • 100ms
.pf-v6-c-button.pf-m-secondary--pf-v6-c-button__icon--Color
(In light theme) #0066cc
  • --pf-v6-c-button__icon--Color
  • --pf-v6-c-button--m-secondary__icon--Color
  • --pf-t--global--icon--color--brand--default
  • --pf-t--global--color--brand--default
  • --pf-t--global--color--brand--200
  • --pf-t--color--blue--50
  • #0066cc
.pf-v6-c-button.pf-m-secondary--pf-v6-c-button--hover--Color
(In light theme) #004d99
  • --pf-v6-c-button--hover--Color
  • --pf-v6-c-button--m-secondary--hover--Color
  • --pf-t--global--text--color--brand--hover
  • --pf-t--global--color--brand--hover
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-button.pf-m-secondary--pf-v6-c-button--hover--BorderColor
(In light theme) #004d99
  • --pf-v6-c-button--hover--BorderColor
  • --pf-v6-c-button--m-secondary--hover--BorderColor
  • --pf-t--global--border--color--brand--hover
  • --pf-t--global--color--brand--hover
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-button.pf-m-secondary--pf-v6-c-button--hover__icon--Color
(In light theme) #004d99
  • --pf-v6-c-button--hover__icon--Color
  • --pf-v6-c-button--m-secondary--hover__icon--Color
  • --pf-t--global--icon--color--brand--hover
  • --pf-t--global--color--brand--hover
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-button.pf-m-secondary--pf-v6-c-button--m-clicked--Color
(In light theme) #004d99
  • --pf-v6-c-button--m-clicked--Color
  • --pf-v6-c-button--m-secondary--m-clicked--Color
  • --pf-t--global--text--color--brand--clicked
  • --pf-t--global--color--brand--clicked
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-button.pf-m-secondary--pf-v6-c-button--m-clicked--BorderColor
(In light theme) #004d99
  • --pf-v6-c-button--m-clicked--BorderColor
  • --pf-v6-c-button--m-secondary--m-clicked--BorderColor
  • --pf-t--global--border--color--brand--clicked
  • --pf-t--global--color--brand--clicked
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-button.pf-m-secondary--pf-v6-c-button--m-clicked__icon--Color
(In light theme) #004d99
  • --pf-v6-c-button--m-clicked__icon--Color
  • --pf-v6-c-button--m-secondary--m-clicked__icon--Color
  • --pf-t--global--icon--color--brand--clicked
  • --pf-t--global--color--brand--clicked
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-button.pf-m-secondary--pf-v6-c-button--m-danger--Color
(In light theme) #b1380b
  • --pf-v6-c-button--m-danger--Color
  • --pf-v6-c-button--m-secondary--m-danger--Color
  • --pf-t--global--text--color--status--danger--default
  • --pf-t--global--color--status--danger--default
  • --pf-t--global--color--status--danger--100
  • --pf-t--color--red-orange--60
  • #b1380b
.pf-v6-c-button.pf-m-secondary--pf-v6-c-button--m-danger__icon--Color
(In light theme) #b1380b
  • --pf-v6-c-button--m-danger__icon--Color
  • --pf-v6-c-button--m-secondary--m-danger__icon--Color
  • --pf-t--global--icon--color--status--danger--default
  • --pf-t--global--color--status--danger--default
  • --pf-t--global--color--status--danger--100
  • --pf-t--color--red-orange--60
  • #b1380b
.pf-v6-c-button.pf-m-secondary--pf-v6-c-button--m-danger--hover--Color
(In light theme) #731f00
  • --pf-v6-c-button--m-danger--hover--Color
  • --pf-v6-c-button--m-secondary--m-danger--hover--Color
  • --pf-t--global--text--color--status--danger--hover
  • --pf-t--global--color--status--danger--hover
  • --pf-t--global--color--status--danger--200
  • --pf-t--color--red-orange--70
  • #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--m-danger--hover__icon--Color
  • --pf-v6-c-button--m-secondary--m-danger--hover__icon--Color
  • --pf-t--global--icon--color--status--danger--hover
  • --pf-t--global--color--status--danger--hover
  • --pf-t--global--color--status--danger--200
  • --pf-t--color--red-orange--70
  • #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--m-danger--m-clicked--Color
  • --pf-v6-c-button--m-secondary--m-danger--m-clicked--Color
  • --pf-t--global--text--color--status--danger--clicked
  • --pf-t--global--color--status--danger--clicked
  • --pf-t--global--color--status--danger--200
  • --pf-t--color--red-orange--70
  • #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--m-danger--m-clicked__icon--Color
  • --pf-v6-c-button--m-secondary--m-danger--m-clicked__icon--Color
  • --pf-t--global--icon--color--status--danger--clicked
  • --pf-t--global--color--status--danger--clicked
  • --pf-t--global--color--status--danger--200
  • --pf-t--color--red-orange--70
  • #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--m-secondary--BorderColor
  • --pf-v6-c-button--m-secondary--m-danger--BorderColor
  • --pf-t--global--border--color--status--danger--default
  • --pf-t--global--color--status--danger--default
  • --pf-t--global--color--status--danger--100
  • --pf-t--color--red-orange--60
  • #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--m-secondary--hover--BorderColor
  • --pf-v6-c-button--m-secondary--m-danger--hover--BorderColor
  • --pf-t--global--border--color--status--danger--hover
  • --pf-t--global--color--status--danger--hover
  • --pf-t--global--color--status--danger--200
  • --pf-t--color--red-orange--70
  • #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--m-secondary--m-clicked--BorderColor
  • --pf-v6-c-button--m-secondary--m-danger--m-clicked--BorderColor
  • --pf-t--global--border--color--status--danger--clicked
  • --pf-t--global--color--status--danger--clicked
  • --pf-t--global--color--status--danger--200
  • --pf-t--color--red-orange--70
  • #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--Color
  • --pf-v6-c-button--m-tertiary--Color
  • --pf-t--global--text--color--brand--default
  • --pf-t--global--color--brand--default
  • --pf-t--global--color--brand--200
  • --pf-t--color--blue--50
  • #0066cc
.pf-v6-c-button.pf-m-tertiary--pf-v6-c-button--BorderColor
(In light theme) #c7c7c7
  • --pf-v6-c-button--BorderColor
  • --pf-v6-c-button--m-tertiary--BorderColor
  • --pf-t--global--border--color--default
  • --pf-t--global--border--color--100
  • --pf-t--color--gray--30
  • #c7c7c7
.pf-v6-c-button.pf-m-tertiary--pf-v6-c-button--TransitionDuration
100ms
  • --pf-v6-c-button--TransitionDuration
  • --pf-v6-c-button--m-tertiary--TransitionDuration
  • --pf-t--global--motion--duration--fade--short
  • --pf-t--global--motion--duration--sm
  • --pf-t--global--duration--100
  • 100ms
.pf-v6-c-button.pf-m-tertiary--pf-v6-c-button__icon--Color
(In light theme) #0066cc
  • --pf-v6-c-button__icon--Color
  • --pf-v6-c-button--m-tertiary__icon--Color
  • --pf-t--global--icon--color--brand--default
  • --pf-t--global--color--brand--default
  • --pf-t--global--color--brand--200
  • --pf-t--color--blue--50
  • #0066cc
.pf-v6-c-button.pf-m-tertiary--pf-v6-c-button--hover--Color
(In light theme) #004d99
  • --pf-v6-c-button--hover--Color
  • --pf-v6-c-button--m-tertiary--hover--Color
  • --pf-t--global--text--color--brand--hover
  • --pf-t--global--color--brand--hover
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-button.pf-m-tertiary--pf-v6-c-button--hover--BorderColor
(In light theme) #4394e5
  • --pf-v6-c-button--hover--BorderColor
  • --pf-v6-c-button--m-tertiary--hover--BorderColor
  • --pf-t--global--border--color--hover
  • --pf-t--global--color--brand--100
  • --pf-t--color--blue--40
  • #4394e5
.pf-v6-c-button.pf-m-tertiary--pf-v6-c-button--hover__icon--Color
(In light theme) #004d99
  • --pf-v6-c-button--hover__icon--Color
  • --pf-v6-c-button--m-tertiary--hover__icon--Color
  • --pf-t--global--icon--color--brand--hover
  • --pf-t--global--color--brand--hover
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-button.pf-m-tertiary--pf-v6-c-button--m-clicked--Color
(In light theme) #004d99
  • --pf-v6-c-button--m-clicked--Color
  • --pf-v6-c-button--m-tertiary--m-clicked--Color
  • --pf-t--global--text--color--brand--clicked
  • --pf-t--global--color--brand--clicked
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-button.pf-m-tertiary--pf-v6-c-button--m-clicked--BorderColor
(In light theme) #0066cc
  • --pf-v6-c-button--m-clicked--BorderColor
  • --pf-v6-c-button--m-tertiary--m-clicked--BorderColor
  • --pf-t--global--border--color--clicked
  • --pf-t--global--color--brand--200
  • --pf-t--color--blue--50
  • #0066cc
.pf-v6-c-button.pf-m-tertiary--pf-v6-c-button--m-clicked__icon--Color
(In light theme) #004d99
  • --pf-v6-c-button--m-clicked__icon--Color
  • --pf-v6-c-button--m-tertiary--m-clicked__icon--Color
  • --pf-t--global--icon--color--brand--clicked
  • --pf-t--global--color--brand--clicked
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-button.pf-m-link--pf-v6-c-button--PaddingInlineEnd
0.5rem
  • --pf-v6-c-button--PaddingInlineEnd
  • --pf-v6-c-button--m-link--PaddingInlineEnd
  • --pf-t--global--spacer--action--horizontal--plain--default
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-button.pf-m-link--pf-v6-c-button--PaddingInlineStart
0.5rem
  • --pf-v6-c-button--PaddingInlineStart
  • --pf-v6-c-button--m-link--PaddingInlineStart
  • --pf-t--global--spacer--action--horizontal--plain--default
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-button.pf-m-link--pf-v6-c-button--Color
(In light theme) #0066cc
  • --pf-v6-c-button--Color
  • --pf-v6-c-button--m-link--Color
  • --pf-t--global--text--color--brand--default
  • --pf-t--global--color--brand--default
  • --pf-t--global--color--brand--200
  • --pf-t--color--blue--50
  • #0066cc
.pf-v6-c-button.pf-m-link--pf-v6-c-button--BorderRadius
6px
  • --pf-v6-c-button--BorderRadius
  • --pf-v6-c-button--m-link--BorderRadius
  • --pf-t--global--border--radius--small
  • --pf-t--global--border--radius--200
  • 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--BackgroundColor
  • --pf-v6-c-button--m-link--BackgroundColor
  • --pf-t--global--background--color--action--plain--default
  • 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__icon--Color
  • --pf-v6-c-button--m-link__icon--Color
  • --pf-t--global--icon--color--brand--default
  • --pf-t--global--color--brand--default
  • --pf-t--global--color--brand--200
  • --pf-t--color--blue--50
  • #0066cc
.pf-v6-c-button.pf-m-link--pf-v6-c-button--hover--Color
(In light theme) #004d99
  • --pf-v6-c-button--hover--Color
  • --pf-v6-c-button--m-link--hover--Color
  • --pf-t--global--text--color--brand--hover
  • --pf-t--global--color--brand--hover
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.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--hover--BackgroundColor
  • --pf-v6-c-button--m-link--hover--BackgroundColor
  • --pf-t--global--background--color--action--plain--hover
  • --pf-t--global--background--color--600
  • 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--hover__icon--Color
  • --pf-v6-c-button--m-link--hover__icon--Color
  • --pf-t--global--text--color--brand--hover
  • --pf-t--global--color--brand--hover
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-button.pf-m-link--pf-v6-c-button--m-clicked--Color
(In light theme) #004d99
  • --pf-v6-c-button--m-clicked--Color
  • --pf-v6-c-button--m-link--m-clicked--Color
  • --pf-t--global--text--color--brand--clicked
  • --pf-t--global--color--brand--clicked
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #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--m-clicked--BackgroundColor
  • --pf-v6-c-button--m-link--m-clicked--BackgroundColor
  • --pf-t--global--background--color--action--plain--clicked
  • --pf-t--global--background--color--600
  • 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--m-clicked__icon--Color
  • --pf-v6-c-button--m-link--m-clicked__icon--Color
  • --pf-t--global--text--color--brand--clicked
  • --pf-t--global--color--brand--clicked
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-button.pf-m-link--pf-v6-c-button--m-small--PaddingInlineEnd
0.25rem
  • --pf-v6-c-button--m-small--PaddingInlineEnd
  • --pf-v6-c-button--m-link--m-small--PaddingInlineEnd
  • --pf-t--global--spacer--action--horizontal--plain--compact
  • --pf-t--global--spacer--xs
  • --pf-t--global--spacer--100
  • 0.25rem
.pf-v6-c-button.pf-m-link--pf-v6-c-button--m-small--PaddingInlineStart
0.25rem
  • --pf-v6-c-button--m-small--PaddingInlineStart
  • --pf-v6-c-button--m-link--m-small--PaddingInlineStart
  • --pf-t--global--spacer--action--horizontal--plain--compact
  • --pf-t--global--spacer--xs
  • --pf-t--global--spacer--100
  • 0.25rem
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--Display
inline-flex
  • --pf-v6-c-button--Display
  • --pf-v6-c-button--m-link--m-inline--Display
  • inline-flex
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--JustifyContent
flex-start
  • --pf-v6-c-button--JustifyContent
  • --pf-v6-c-button--m-link--m-inline--JustifyContent
  • flex-start
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--FontSize
initial
  • --pf-v6-c-button--FontSize
  • --pf-v6-c-button--m-link--m-inline--FontSize
  • initial
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--LineHeight
initial
  • --pf-v6-c-button--LineHeight
  • --pf-v6-c-button--m-link--m-inline--LineHeight
  • initial
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--FontWeight
initial
  • --pf-v6-c-button--FontWeight
  • --pf-v6-c-button--m-link--m-inline--FontWeight
  • initial
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--PaddingBlockStart
0
  • --pf-v6-c-button--PaddingBlockStart
  • --pf-v6-c-button--m-link--m-inline--PaddingBlockStart
  • 0
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--PaddingInlineEnd
0
  • --pf-v6-c-button--PaddingInlineEnd
  • --pf-v6-c-button--m-link--m-inline--PaddingInlineEnd
  • 0
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--PaddingBlockEnd
0
  • --pf-v6-c-button--PaddingBlockEnd
  • --pf-v6-c-button--m-link--m-inline--PaddingBlockEnd
  • 0
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--PaddingInlineStart
0
  • --pf-v6-c-button--PaddingInlineStart
  • --pf-v6-c-button--m-link--m-inline--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__progress--InsetInlineStart
  • --pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart
  • --pf-t--global--spacer--xs
  • --pf-t--global--spacer--100
  • 0.25rem
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--TextDecorationLine
underline
  • --pf-v6-c-button--TextDecorationLine
  • --pf-v6-c-button--m-link--m-inline--TextDecorationLine
  • --pf-t--global--text-decoration--link--line--default
  • --pf-t--global--text-decoration--line--200
  • underline
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--TextDecorationStyle
solid
  • --pf-v6-c-button--TextDecorationStyle
  • --pf-v6-c-button--m-link--m-inline--TextDecorationStyle
  • --pf-t--global--text-decoration--link--style--default
  • --pf-t--global--text-decoration--style--100
  • solid
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--hover--TextDecorationLine
underline
  • --pf-v6-c-button--hover--TextDecorationLine
  • --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine
  • --pf-t--global--text-decoration--link--line--hover
  • --pf-t--global--text-decoration--line--200
  • underline
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--hover--TextDecorationStyle
solid
  • --pf-v6-c-button--hover--TextDecorationStyle
  • --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle
  • --pf-t--global--text-decoration--link--style--hover
  • --pf-t--global--text-decoration--style--100
  • 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--disabled--Color
  • --pf-v6-c-button--m-link--m-inline--disabled--Color
  • --pf-t--global--text--color--disabled
  • --pf-t--global--color--disabled--200
  • --pf-t--color--gray--40
  • #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--disabled__icon--Color
  • --pf-v6-c-button--m-link--m-inline--disabled__icon--Color
  • --pf-t--global--icon--color--disabled
  • --pf-t--global--color--disabled--200
  • --pf-t--color--gray--40
  • #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--m-link--Color
  • --pf-v6-c-button--m-link--m-inline--Color
  • --pf-v6-c-banner--link--Color
  • --pf-v6-c-banner--Color
  • --pf-t--global--text--color--nonstatus--on-gray--default
  • --pf-t--global--text--color--regular
  • --pf-t--global--text--color--100
  • --pf-t--color--gray--95
  • #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--m-link__icon--Color
  • --pf-v6-c-button--m-link--m-inline__icon--Color
  • --pf-t--global--icon--color--brand--default
  • --pf-t--global--color--brand--default
  • --pf-t--global--color--brand--200
  • --pf-t--color--blue--50
  • #0066cc
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--TextDecorationColor
currentcolor
  • --pf-v6-c-button--TextDecorationColor
  • --pf-v6-c-button--m-link--m-inline--TextDecorationColor
  • currentcolor
.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--hover--TextDecorationColor
currentcolor
  • --pf-v6-c-button--hover--TextDecorationColor
  • --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor
  • currentcolor
.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--m-link--hover--Color
  • --pf-v6-c-button--m-link--m-inline--hover--Color
  • --pf-v6-c-banner--link--hover--Color
  • --pf-v6-c-banner--Color
  • --pf-t--global--text--color--nonstatus--on-gray--default
  • --pf-t--global--text--color--regular
  • --pf-t--global--text--color--100
  • --pf-t--color--gray--95
  • #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--m-link--hover__icon--Color
  • --pf-v6-c-button--m-link--m-inline--hover__icon--Color
  • --pf-t--global--icon--color--brand--hover
  • --pf-t--global--color--brand--hover
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
span.pf-v6-c-button.pf-m-link.pf-m-inline--pf-v6-c-button--m-link--m-inline--Display
inline
  • --pf-v6-c-button--m-link--m-inline--Display
  • --pf-v6-c-button--span--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
  • --pf-v6-c-button__icon--m-start--MarginInlineEnd
  • --pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd
  • --pf-t--global--spacer--gap--text-to-element--default
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 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__icon--m-end--MarginInlineStart
  • --pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart
  • --pf-t--global--spacer--gap--text-to-element--default
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 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--m-danger--Color
  • --pf-v6-c-button--m-link--m-danger--Color
  • --pf-t--global--text--color--status--danger--default
  • --pf-t--global--color--status--danger--default
  • --pf-t--global--color--status--danger--100
  • --pf-t--color--red-orange--60
  • #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--m-danger--BackgroundColor
  • --pf-v6-c-button--m-link--m-danger--BackgroundColor
  • --pf-t--global--background--color--action--plain--default
  • 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--m-danger__icon--Color
  • --pf-v6-c-button--m-link--m-danger__icon--Color
  • --pf-t--global--text--color--status--danger--default
  • --pf-t--global--color--status--danger--default
  • --pf-t--global--color--status--danger--100
  • --pf-t--color--red-orange--60
  • #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--m-danger--hover--Color
  • --pf-v6-c-button--m-link--m-danger--hover--Color
  • --pf-t--global--text--color--status--danger--hover
  • --pf-t--global--color--status--danger--hover
  • --pf-t--global--color--status--danger--200
  • --pf-t--color--red-orange--70
  • #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--m-danger--hover--BackgroundColor
  • --pf-v6-c-button--m-link--m-danger--hover--BackgroundColor
  • --pf-t--global--background--color--action--plain--hover
  • --pf-t--global--background--color--600
  • 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--m-danger--hover__icon--Color
  • --pf-v6-c-button--m-link--m-danger--hover__icon--Color
  • --pf-t--global--text--color--status--danger--hover
  • --pf-t--global--color--status--danger--hover
  • --pf-t--global--color--status--danger--200
  • --pf-t--color--red-orange--70
  • #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--m-danger--m-clicked--Color
  • --pf-v6-c-button--m-link--m-danger--m-clicked--Color
  • --pf-t--global--text--color--status--danger--clicked
  • --pf-t--global--color--status--danger--clicked
  • --pf-t--global--color--status--danger--200
  • --pf-t--color--red-orange--70
  • #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--m-danger--m-clicked--BackgroundColor
  • --pf-v6-c-button--m-link--m-danger--m-clicked--BackgroundColor
  • --pf-t--global--background--color--action--plain--clicked
  • --pf-t--global--background--color--600
  • 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--m-danger--m-clicked__icon--Color
  • --pf-v6-c-button--m-link--m-danger--m-clicked__icon--Color
  • --pf-t--global--text--color--status--danger--clicked
  • --pf-t--global--color--status--danger--clicked
  • --pf-t--global--color--status--danger--200
  • --pf-t--color--red-orange--70
  • #731f00
.pf-v6-c-button.pf-m-link.pf-m-display-lg--pf-v6-c-button--FontSize
1rem
  • --pf-v6-c-button--FontSize
  • --pf-v6-c-button--m-link--m-display-lg--FontSize
  • --pf-t--global--font--size--body--lg
  • --pf-t--global--font--size--md
  • --pf-t--global--font--size--300
  • 1rem
.pf-v6-c-button.pf-m-warning--pf-v6-c-button--Color
(In light theme) #151515
  • --pf-v6-c-button--Color
  • --pf-v6-c-button--m-warning--Color
  • --pf-t--global--text--color--status--on-warning--default
  • --pf-t--global--text--color--regular
  • --pf-t--global--text--color--100
  • --pf-t--color--gray--95
  • #151515
.pf-v6-c-button.pf-m-warning--pf-v6-c-button--BackgroundColor
(In light theme) #ffcc17
  • --pf-v6-c-button--BackgroundColor
  • --pf-v6-c-button--m-warning--BackgroundColor
  • --pf-t--global--color--status--warning--default
  • --pf-t--global--color--status--warning--100
  • --pf-t--color--yellow--30
  • #ffcc17
.pf-v6-c-button.pf-m-warning--pf-v6-c-button__icon--Color
(In light theme) #1f1f1f
  • --pf-v6-c-button__icon--Color
  • --pf-v6-c-button--m-warning__icon--Color
  • --pf-t--global--icon--color--status--on-warning--default
  • --pf-t--global--icon--color--regular
  • --pf-t--global--icon--color--100
  • --pf-t--color--gray--90
  • #1f1f1f
.pf-v6-c-button.pf-m-warning--pf-v6-c-button--hover--Color
(In light theme) #151515
  • --pf-v6-c-button--hover--Color
  • --pf-v6-c-button--m-warning--hover--Color
  • --pf-t--global--text--color--status--on-warning--hover
  • --pf-t--global--text--color--regular
  • --pf-t--global--text--color--100
  • --pf-t--color--gray--95
  • #151515
.pf-v6-c-button.pf-m-warning--pf-v6-c-button--hover--BackgroundColor
(In light theme) #dca614
  • --pf-v6-c-button--hover--BackgroundColor
  • --pf-v6-c-button--m-warning--hover--BackgroundColor
  • --pf-t--global--color--status--warning--hover
  • --pf-t--global--color--status--warning--200
  • --pf-t--color--yellow--40
  • #dca614
.pf-v6-c-button.pf-m-warning--pf-v6-c-button--hover__icon--Color
(In light theme) #1f1f1f
  • --pf-v6-c-button--hover__icon--Color
  • --pf-v6-c-button--m-warning--hover__icon--Color
  • --pf-t--global--icon--color--status--on-warning--hover
  • --pf-t--global--icon--color--regular
  • --pf-t--global--icon--color--100
  • --pf-t--color--gray--90
  • #1f1f1f
.pf-v6-c-button.pf-m-warning--pf-v6-c-button--m-clicked--Color
(In light theme) #151515
  • --pf-v6-c-button--m-clicked--Color
  • --pf-v6-c-button--m-warning--m-clicked--Color
  • --pf-t--global--text--color--status--on-warning--clicked
  • --pf-t--global--text--color--regular
  • --pf-t--global--text--color--100
  • --pf-t--color--gray--95
  • #151515
.pf-v6-c-button.pf-m-warning--pf-v6-c-button--m-clicked--BackgroundColor
(In light theme) #dca614
  • --pf-v6-c-button--m-clicked--BackgroundColor
  • --pf-v6-c-button--m-warning--m-clicked--BackgroundColor
  • --pf-t--global--color--status--warning--clicked
  • --pf-t--global--color--status--warning--200
  • --pf-t--color--yellow--40
  • #dca614
.pf-v6-c-button.pf-m-warning--pf-v6-c-button--m-clicked__icon--Color
(In light theme) #1f1f1f
  • --pf-v6-c-button--m-clicked__icon--Color
  • --pf-v6-c-button--m-warning--m-clicked__icon--Color
  • --pf-t--global--icon--color--status--on-warning--clicked
  • --pf-t--global--icon--color--regular
  • --pf-t--global--icon--color--100
  • --pf-t--color--gray--90
  • #1f1f1f
.pf-v6-c-button.pf-m-danger--pf-v6-c-button--Color
(In light theme) #ffffff
  • --pf-v6-c-button--Color
  • --pf-v6-c-button--m-danger--Color
  • --pf-t--global--text--color--status--on-danger--default
  • --pf-t--global--text--color--inverse
  • --pf-t--global--text--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button.pf-m-danger--pf-v6-c-button--BackgroundColor
(In light theme) #b1380b
  • --pf-v6-c-button--BackgroundColor
  • --pf-v6-c-button--m-danger--BackgroundColor
  • --pf-t--global--color--status--danger--default
  • --pf-t--global--color--status--danger--100
  • --pf-t--color--red-orange--60
  • #b1380b
.pf-v6-c-button.pf-m-danger--pf-v6-c-button__icon--Color
(In light theme) #ffffff
  • --pf-v6-c-button__icon--Color
  • --pf-v6-c-button--m-danger__icon--Color
  • --pf-t--global--icon--color--status--on-danger--default
  • --pf-t--global--icon--color--inverse
  • --pf-t--global--icon--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button.pf-m-danger--pf-v6-c-button--hover--Color
(In light theme) #ffffff
  • --pf-v6-c-button--hover--Color
  • --pf-v6-c-button--m-danger--hover--Color
  • --pf-t--global--text--color--status--on-danger--hover
  • --pf-t--global--text--color--inverse
  • --pf-t--global--text--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button.pf-m-danger--pf-v6-c-button--hover--BackgroundColor
(In light theme) #731f00
  • --pf-v6-c-button--hover--BackgroundColor
  • --pf-v6-c-button--m-danger--hover--BackgroundColor
  • --pf-t--global--color--status--danger--hover
  • --pf-t--global--color--status--danger--200
  • --pf-t--color--red-orange--70
  • #731f00
.pf-v6-c-button.pf-m-danger--pf-v6-c-button--hover__icon--Color
(In light theme) #ffffff
  • --pf-v6-c-button--hover__icon--Color
  • --pf-v6-c-button--m-danger--hover__icon--Color
  • --pf-t--global--icon--color--status--on-danger--hover
  • --pf-t--global--icon--color--inverse
  • --pf-t--global--icon--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button.pf-m-danger--pf-v6-c-button--m-clicked--Color
(In light theme) #ffffff
  • --pf-v6-c-button--m-clicked--Color
  • --pf-v6-c-button--m-danger--m-clicked--Color
  • --pf-t--global--text--color--status--on-danger--clicked
  • --pf-t--global--icon--color--inverse
  • --pf-t--global--icon--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button.pf-m-danger--pf-v6-c-button--m-clicked--BackgroundColor
(In light theme) #731f00
  • --pf-v6-c-button--m-clicked--BackgroundColor
  • --pf-v6-c-button--m-danger--m-clicked--BackgroundColor
  • --pf-t--global--color--status--danger--clicked
  • --pf-t--global--color--status--danger--200
  • --pf-t--color--red-orange--70
  • #731f00
.pf-v6-c-button.pf-m-danger--pf-v6-c-button--m-clicked__icon--Color
(In light theme) #ffffff
  • --pf-v6-c-button--m-clicked__icon--Color
  • --pf-v6-c-button--m-danger--m-clicked__icon--Color
  • --pf-t--global--icon--color--status--on-danger--clicked
  • --pf-t--global--icon--color--inverse
  • --pf-t--global--icon--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button.pf-m-control--pf-v6-c-button--BorderRadius
6px
  • --pf-v6-c-button--BorderRadius
  • --pf-v6-c-button--m-control--BorderRadius
  • --pf-t--global--border--radius--small
  • --pf-t--global--border--radius--200
  • 6px
.pf-v6-c-button.pf-m-control--pf-v6-c-button--PaddingInlineStart
1rem
  • --pf-v6-c-button--PaddingInlineStart
  • --pf-v6-c-button--m-control--PaddingInlineStart
  • --pf-t--global--spacer--control--horizontal--default
  • --pf-t--global--spacer--md
  • --pf-t--global--spacer--300
  • 1rem
.pf-v6-c-button.pf-m-control--pf-v6-c-button--PaddingInlineEnd
1rem
  • --pf-v6-c-button--PaddingInlineEnd
  • --pf-v6-c-button--m-control--PaddingInlineEnd
  • --pf-t--global--spacer--control--horizontal--default
  • --pf-t--global--spacer--md
  • --pf-t--global--spacer--300
  • 1rem
.pf-v6-c-button.pf-m-control--pf-v6-c-button--Color
(In light theme) #151515
  • --pf-v6-c-button--Color
  • --pf-v6-c-button--m-control--Color
  • --pf-t--global--text--color--regular
  • --pf-t--global--text--color--100
  • --pf-t--color--gray--95
  • #151515
.pf-v6-c-button.pf-m-control--pf-v6-c-button--BackgroundColor
(In light theme) #ffffff
  • --pf-v6-c-button--BackgroundColor
  • --pf-v6-c-button--m-control--BackgroundColor
  • --pf-t--global--background--color--control--default
  • --pf-t--global--background--color--primary--default
  • --pf-t--global--background--color--100
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button.pf-m-control--pf-v6-c-button--BorderColor
(In light theme) #c7c7c7
  • --pf-v6-c-button--BorderColor
  • --pf-v6-c-button--m-control--BorderColor
  • --pf-t--global--border--color--default
  • --pf-t--global--border--color--100
  • --pf-t--color--gray--30
  • #c7c7c7
.pf-v6-c-button.pf-m-control--pf-v6-c-button--BorderWidth
1px
  • --pf-v6-c-button--BorderWidth
  • --pf-v6-c-button--m-control--BorderWidth
  • --pf-t--global--border--width--control--default
  • --pf-t--global--border--width--100
  • 1px
.pf-v6-c-button.pf-m-control--pf-v6-c-button__icon--Color
(In light theme) #1f1f1f
  • --pf-v6-c-button__icon--Color
  • --pf-v6-c-button--m-control__icon--Color
  • --pf-t--global--icon--color--regular
  • --pf-t--global--icon--color--100
  • --pf-t--color--gray--90
  • #1f1f1f
.pf-v6-c-button.pf-m-control--pf-v6-c-button--hover--Color
(In light theme) #151515
  • --pf-v6-c-button--hover--Color
  • --pf-v6-c-button--m-control--hover--Color
  • --pf-t--global--text--color--regular
  • --pf-t--global--text--color--100
  • --pf-t--color--gray--95
  • #151515
.pf-v6-c-button.pf-m-control--pf-v6-c-button--hover--BackgroundColor
(In light theme) #ffffff
  • --pf-v6-c-button--hover--BackgroundColor
  • --pf-v6-c-button--m-control--hover--BackgroundColor
  • --pf-t--global--background--color--control--default
  • --pf-t--global--background--color--primary--default
  • --pf-t--global--background--color--100
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button.pf-m-control--pf-v6-c-button--hover--BorderColor
(In light theme) #4394e5
  • --pf-v6-c-button--hover--BorderColor
  • --pf-v6-c-button--m-control--hover--BorderColor
  • --pf-t--global--border--color--hover
  • --pf-t--global--color--brand--100
  • --pf-t--color--blue--40
  • #4394e5
.pf-v6-c-button.pf-m-control--pf-v6-c-button--hover--BorderWidth
1px
  • --pf-v6-c-button--hover--BorderWidth
  • --pf-v6-c-button--m-control--hover--BorderWidth
  • --pf-t--global--border--width--control--hover
  • --pf-t--global--border--width--100
  • 1px
.pf-v6-c-button.pf-m-control--pf-v6-c-button--hover__icon--Color
(In light theme) #1f1f1f
  • --pf-v6-c-button--hover__icon--Color
  • --pf-v6-c-button--m-control--hover__icon--Color
  • --pf-t--global--icon--color--regular
  • --pf-t--global--icon--color--100
  • --pf-t--color--gray--90
  • #1f1f1f
.pf-v6-c-button.pf-m-control--pf-v6-c-button--m-clicked--Color
(In light theme) #151515
  • --pf-v6-c-button--m-clicked--Color
  • --pf-v6-c-button--m-control--m-clicked--Color
  • --pf-t--global--text--color--regular
  • --pf-t--global--text--color--100
  • --pf-t--color--gray--95
  • #151515
.pf-v6-c-button.pf-m-control--pf-v6-c-button--m-clicked--BackgroundColor
(In light theme) #ffffff
  • --pf-v6-c-button--m-clicked--BackgroundColor
  • --pf-v6-c-button--m-control--m-clicked--BackgroundColor
  • --pf-t--global--background--color--control--default
  • --pf-t--global--background--color--primary--default
  • --pf-t--global--background--color--100
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button.pf-m-control--pf-v6-c-button--m-clicked--BorderColor
(In light theme) #0066cc
  • --pf-v6-c-button--m-clicked--BorderColor
  • --pf-v6-c-button--m-control--m-clicked--BorderColor
  • --pf-t--global--border--color--clicked
  • --pf-t--global--color--brand--200
  • --pf-t--color--blue--50
  • #0066cc
.pf-v6-c-button.pf-m-control--pf-v6-c-button--m-clicked--BorderWidth
2px
  • --pf-v6-c-button--m-clicked--BorderWidth
  • --pf-v6-c-button--m-control--m-clicked--BorderWidth
  • --pf-t--global--border--width--control--clicked
  • --pf-t--global--border--width--200
  • 2px
.pf-v6-c-button.pf-m-control--pf-v6-c-button--m-clicked__icon--Color
(In light theme) #1f1f1f
  • --pf-v6-c-button--m-clicked__icon--Color
  • --pf-v6-c-button--m-control--m-clicked__icon--Color
  • --pf-t--global--icon--color--regular
  • --pf-t--global--icon--color--100
  • --pf-t--color--gray--90
  • #1f1f1f
.pf-v6-c-button.pf-m-control--pf-v6-c-button--m-small--PaddingInlineEnd
0.5rem
  • --pf-v6-c-button--m-small--PaddingInlineEnd
  • --pf-v6-c-button--m-control--m-small--PaddingInlineEnd
  • --pf-t--global--spacer--control--horizontal--compact
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-button.pf-m-control--pf-v6-c-button--m-small--PaddingInlineStart
0.5rem
  • --pf-v6-c-button--m-small--PaddingInlineStart
  • --pf-v6-c-button--m-control--m-small--PaddingInlineStart
  • --pf-t--global--spacer--control--horizontal--compact
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-button.pf-m-stateful--pf-v6-c-button--BorderRadius
6px
  • --pf-v6-c-button--BorderRadius
  • --pf-v6-c-button--m-stateful--BorderRadius
  • --pf-t--global--border--radius--small
  • --pf-t--global--border--radius--200
  • 6px
.pf-v6-c-button.pf-m-stateful--pf-v6-c-button--PaddingInlineStart
1rem
  • --pf-v6-c-button--PaddingInlineStart
  • --pf-v6-c-button--m-stateful--PaddingInlineStart
  • --pf-t--global--spacer--control--horizontal--default
  • --pf-t--global--spacer--md
  • --pf-t--global--spacer--300
  • 1rem
.pf-v6-c-button.pf-m-stateful--pf-v6-c-button--PaddingInlineEnd
1rem
  • --pf-v6-c-button--PaddingInlineEnd
  • --pf-v6-c-button--m-stateful--PaddingInlineEnd
  • --pf-t--global--spacer--control--horizontal--default
  • --pf-t--global--spacer--md
  • --pf-t--global--spacer--300
  • 1rem
.pf-v6-c-button.pf-m-stateful--pf-v6-c-button--m-small--PaddingInlineEnd
0.5rem
  • --pf-v6-c-button--m-small--PaddingInlineEnd
  • --pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd
  • --pf-t--global--spacer--control--horizontal--compact
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-button.pf-m-stateful--pf-v6-c-button--m-small--PaddingInlineStart
0.5rem
  • --pf-v6-c-button--m-small--PaddingInlineStart
  • --pf-v6-c-button--m-stateful--m-small--PaddingInlineStart
  • --pf-t--global--spacer--control--horizontal--compact
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-button.pf-m-read--pf-v6-c-button--BackgroundColor
(In light theme) #ffffff
  • --pf-v6-c-button--BackgroundColor
  • --pf-v6-c-button--m-read--BackgroundColor
  • --pf-t--global--background--color--control--default
  • --pf-t--global--background--color--primary--default
  • --pf-t--global--background--color--100
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button.pf-m-read--pf-v6-c-button--BorderColor
(In light theme) #c7c7c7
  • --pf-v6-c-button--BorderColor
  • --pf-v6-c-button--m-read--BorderColor
  • --pf-t--global--border--color--default
  • --pf-t--global--border--color--100
  • --pf-t--color--gray--30
  • #c7c7c7
.pf-v6-c-button.pf-m-read--pf-v6-c-button--hover--BackgroundColor
(In light theme) #ffffff
  • --pf-v6-c-button--hover--BackgroundColor
  • --pf-v6-c-button--m-read--hover--BackgroundColor
  • --pf-t--global--background--color--control--default
  • --pf-t--global--background--color--primary--default
  • --pf-t--global--background--color--100
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button.pf-m-read--pf-v6-c-button--hover--BorderColor
(In light theme) #4394e5
  • --pf-v6-c-button--hover--BorderColor
  • --pf-v6-c-button--m-read--hover--BorderColor
  • --pf-t--global--border--color--hover
  • --pf-t--global--color--brand--100
  • --pf-t--color--blue--40
  • #4394e5
.pf-v6-c-button.pf-m-read--pf-v6-c-button--m-clicked--BackgroundColor
(In light theme) #ffffff
  • --pf-v6-c-button--m-clicked--BackgroundColor
  • --pf-v6-c-button--m-read--m-clicked--BackgroundColor
  • --pf-t--global--background--color--control--default
  • --pf-t--global--background--color--primary--default
  • --pf-t--global--background--color--100
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button.pf-m-read--pf-v6-c-button--m-clicked--BorderColor
(In light theme) #0066cc
  • --pf-v6-c-button--m-clicked--BorderColor
  • --pf-v6-c-button--m-read--m-clicked--BorderColor
  • --pf-t--global--border--color--clicked
  • --pf-t--global--color--brand--200
  • --pf-t--color--blue--50
  • #0066cc
.pf-v6-c-button.pf-m-unread--pf-v6-c-button--Color
(In light theme) #ffffff
  • --pf-v6-c-button--Color
  • --pf-v6-c-button--m-unread--Color
  • --pf-t--global--text--color--status--unread--on-default--default
  • --pf-t--global--text--color--inverse
  • --pf-t--global--text--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button.pf-m-unread--pf-v6-c-button--BackgroundColor
(In light theme) #0066cc
  • --pf-v6-c-button--BackgroundColor
  • --pf-v6-c-button--m-unread--BackgroundColor
  • --pf-t--global--color--status--unread--default
  • --pf-t--global--color--brand--default
  • --pf-t--global--color--brand--200
  • --pf-t--color--blue--50
  • #0066cc
.pf-v6-c-button.pf-m-unread--pf-v6-c-button__icon--Color
(In light theme) #ffffff
  • --pf-v6-c-button__icon--Color
  • --pf-v6-c-button--m-unread__icon--Color
  • --pf-t--global--icon--color--status--unread--on-default--default
  • --pf-t--global--icon--color--inverse
  • --pf-t--global--icon--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button.pf-m-unread--pf-v6-c-button--hover--Color
(In light theme) #ffffff
  • --pf-v6-c-button--hover--Color
  • --pf-v6-c-button--m-unread--hover--Color
  • --pf-t--global--text--color--status--unread--on-default--hover
  • --pf-t--global--text--color--inverse
  • --pf-t--global--text--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button.pf-m-unread--pf-v6-c-button--hover--BackgroundColor
(In light theme) #004d99
  • --pf-v6-c-button--hover--BackgroundColor
  • --pf-v6-c-button--m-unread--hover--BackgroundColor
  • --pf-t--global--color--status--unread--hover
  • --pf-t--global--color--brand--hover
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-button.pf-m-unread--pf-v6-c-button--hover__icon--Color
(In light theme) #ffffff
  • --pf-v6-c-button--hover__icon--Color
  • --pf-v6-c-button--m-unread--hover__icon--Color
  • --pf-t--global--icon--color--status--unread--on-default--hover
  • --pf-t--global--icon--color--inverse
  • --pf-t--global--icon--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button.pf-m-unread--pf-v6-c-button--m-clicked--Color
(In light theme) #ffffff
  • --pf-v6-c-button--m-clicked--Color
  • --pf-v6-c-button--m-unread--m-clicked--Color
  • --pf-t--global--text--color--status--unread--on-default--clicked
  • --pf-t--global--text--color--inverse
  • --pf-t--global--text--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button.pf-m-unread--pf-v6-c-button--m-clicked--BackgroundColor
(In light theme) #004d99
  • --pf-v6-c-button--m-clicked--BackgroundColor
  • --pf-v6-c-button--m-unread--m-clicked--BackgroundColor
  • --pf-t--global--color--status--unread--clicked
  • --pf-t--global--color--brand--clicked
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-button.pf-m-unread--pf-v6-c-button--m-clicked__icon--Color
(In light theme) #ffffff
  • --pf-v6-c-button--m-clicked__icon--Color
  • --pf-v6-c-button--m-unread--m-clicked__icon--Color
  • --pf-t--global--icon--color--status--unread--on-default--clicked
  • --pf-t--global--icon--color--inverse
  • --pf-t--global--icon--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button.pf-m-attention--pf-v6-c-button--Color
(In light theme) #ffffff
  • --pf-v6-c-button--Color
  • --pf-v6-c-button--m-attention--Color
  • --pf-t--global--text--color--status--unread--on-attention--default
  • --pf-t--global--text--color--inverse
  • --pf-t--global--text--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button.pf-m-attention--pf-v6-c-button--BackgroundColor
(In light theme) #b1380b
  • --pf-v6-c-button--BackgroundColor
  • --pf-v6-c-button--m-attention--BackgroundColor
  • --pf-t--global--color--status--unread--attention--default
  • --pf-t--global--color--status--danger--default
  • --pf-t--global--color--status--danger--100
  • --pf-t--color--red-orange--60
  • #b1380b
.pf-v6-c-button.pf-m-attention--pf-v6-c-button__icon--Color
(In light theme) #ffffff
  • --pf-v6-c-button__icon--Color
  • --pf-v6-c-button--m-attention__icon--Color
  • --pf-t--global--icon--color--status--unread--on-attention--default
  • --pf-t--global--icon--color--inverse
  • --pf-t--global--icon--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button.pf-m-attention--pf-v6-c-button--hover--Color
(In light theme) #ffffff
  • --pf-v6-c-button--hover--Color
  • --pf-v6-c-button--m-attention--hover--Color
  • --pf-t--global--text--color--status--unread--on-attention--hover
  • --pf-t--global--text--color--inverse
  • --pf-t--global--text--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button.pf-m-attention--pf-v6-c-button--hover--BackgroundColor
(In light theme) #731f00
  • --pf-v6-c-button--hover--BackgroundColor
  • --pf-v6-c-button--m-attention--hover--BackgroundColor
  • --pf-t--global--color--status--unread--attention--hover
  • --pf-t--global--color--status--danger--hover
  • --pf-t--global--color--status--danger--200
  • --pf-t--color--red-orange--70
  • #731f00
.pf-v6-c-button.pf-m-attention--pf-v6-c-button--hover__icon--Color
(In light theme) #ffffff
  • --pf-v6-c-button--hover__icon--Color
  • --pf-v6-c-button--m-attention--hover__icon--Color
  • --pf-t--global--icon--color--status--unread--on-attention--hover
  • --pf-t--global--icon--color--inverse
  • --pf-t--global--icon--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button.pf-m-attention--pf-v6-c-button--m-clicked--Color
(In light theme) #ffffff
  • --pf-v6-c-button--m-clicked--Color
  • --pf-v6-c-button--m-attention--m-clicked--Color
  • --pf-t--global--text--color--status--unread--on-attention--clicked
  • --pf-t--global--text--color--inverse
  • --pf-t--global--text--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button.pf-m-attention--pf-v6-c-button--m-clicked--BackgroundColor
(In light theme) #731f00
  • --pf-v6-c-button--m-clicked--BackgroundColor
  • --pf-v6-c-button--m-attention--m-clicked--BackgroundColor
  • --pf-t--global--color--status--unread--attention--clicked
  • --pf-t--global--color--status--danger--clicked
  • --pf-t--global--color--status--danger--200
  • --pf-t--color--red-orange--70
  • #731f00
.pf-v6-c-button.pf-m-attention--pf-v6-c-button--m-clicked__icon--Color
(In light theme) #ffffff
  • --pf-v6-c-button--m-clicked__icon--Color
  • --pf-v6-c-button--m-attention--m-clicked__icon--Color
  • --pf-t--global--icon--color--status--unread--on-attention--clicked
  • --pf-t--global--icon--color--inverse
  • --pf-t--global--icon--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button.pf-m-plain--pf-v6-c-button--BorderRadius
6px
  • --pf-v6-c-button--BorderRadius
  • --pf-v6-c-button--m-plain--BorderRadius
  • --pf-t--global--border--radius--small
  • --pf-t--global--border--radius--200
  • 6px
.pf-v6-c-button.pf-m-plain--pf-v6-c-button--Color
(In light theme) #1f1f1f
  • --pf-v6-c-button--Color
  • --pf-v6-c-button--m-plain--Color
  • --pf-t--global--icon--color--regular
  • --pf-t--global--icon--color--100
  • --pf-t--color--gray--90
  • #1f1f1f
.pf-v6-c-button.pf-m-plain--pf-v6-c-button__icon--Color
(In light theme) #151515
  • --pf-v6-c-button__icon--Color
  • --pf-v6-c-button--m-plain__icon--Color
  • --pf-t--global--text--color--regular
  • --pf-t--global--text--color--100
  • --pf-t--color--gray--95
  • #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--BackgroundColor
  • --pf-v6-c-button--m-plain--BackgroundColor
  • --pf-t--global--background--color--action--plain--default
  • rgba(255, 255, 255, 0.0000)
.pf-v6-c-button.pf-m-plain--pf-v6-c-button--PaddingInlineEnd
0.5rem
  • --pf-v6-c-button--PaddingInlineEnd
  • --pf-v6-c-button--m-plain--PaddingInlineEnd
  • --pf-t--global--spacer--action--horizontal--plain--default
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-button.pf-m-plain--pf-v6-c-button--PaddingInlineStart
0.5rem
  • --pf-v6-c-button--PaddingInlineStart
  • --pf-v6-c-button--m-plain--PaddingInlineStart
  • --pf-t--global--spacer--action--horizontal--plain--default
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-button.pf-m-plain--pf-v6-c-button__progress--Color
(In light theme) #0066cc
  • --pf-v6-c-button__progress--Color
  • --pf-v6-c-button--m-in-progress--m-plain--Color
  • --pf-t--global--icon--color--brand--default
  • --pf-t--global--color--brand--default
  • --pf-t--global--color--brand--200
  • --pf-t--color--blue--50
  • #0066cc
.pf-v6-c-button.pf-m-plain--pf-v6-c-button--hover--Color
(In light theme) #1f1f1f
  • --pf-v6-c-button--hover--Color
  • --pf-v6-c-button--m-plain--hover--Color
  • --pf-t--global--icon--color--regular
  • --pf-t--global--icon--color--100
  • --pf-t--color--gray--90
  • #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--hover--BackgroundColor
  • --pf-v6-c-button--m-plain--hover--BackgroundColor
  • --pf-t--global--background--color--action--plain--hover
  • --pf-t--global--background--color--600
  • 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--m-clicked--Color
  • --pf-v6-c-button--m-plain--m-clicked--Color
  • --pf-t--global--icon--color--regular
  • --pf-t--global--icon--color--100
  • --pf-t--color--gray--90
  • #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--m-clicked--BackgroundColor
  • --pf-v6-c-button--m-plain--m-clicked--BackgroundColor
  • --pf-t--global--background--color--action--plain--clicked
  • --pf-t--global--background--color--600
  • 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--disabled--Color
  • --pf-v6-c-button--m-plain--disabled--Color
  • --pf-t--global--text--color--disabled
  • --pf-t--global--color--disabled--200
  • --pf-t--color--gray--40
  • #a3a3a3
.pf-v6-c-button.pf-m-plain--pf-v6-c-button--disabled__icon--Color
(In light theme) #a3a3a3
  • --pf-v6-c-button--disabled__icon--Color
  • --pf-v6-c-button--m-plain--disabled__icon--Color
  • --pf-t--global--icon--color--disabled
  • --pf-t--global--color--disabled--200
  • --pf-t--color--gray--40
  • #a3a3a3
.pf-v6-c-button.pf-m-plain--pf-v6-c-button--disabled--BackgroundColor
transparent
  • --pf-v6-c-button--disabled--BackgroundColor
  • --pf-v6-c-button--m-plain--disabled--BackgroundColor
  • transparent
.pf-v6-c-button.pf-m-plain--pf-v6-c-button--m-small--PaddingInlineEnd
0.25rem
  • --pf-v6-c-button--m-small--PaddingInlineEnd
  • --pf-v6-c-button--m-plain--m-small--PaddingInlineEnd
  • --pf-t--global--spacer--action--horizontal--plain--compact
  • --pf-t--global--spacer--xs
  • --pf-t--global--spacer--100
  • 0.25rem
.pf-v6-c-button.pf-m-plain--pf-v6-c-button--m-small--PaddingInlineStart
0.25rem
  • --pf-v6-c-button--m-small--PaddingInlineStart
  • --pf-v6-c-button--m-plain--m-small--PaddingInlineStart
  • --pf-t--global--spacer--action--horizontal--plain--compact
  • --pf-t--global--spacer--xs
  • --pf-t--global--spacer--100
  • 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__icon--Color
  • --pf-v6-c-button--m-plain--m-no-padding__icon--Color
  • --pf-t--global--icon--color--subtle
  • --pf-t--global--icon--color--200
  • --pf-t--color--gray--50
  • #707070
.pf-v6-c-button.pf-m-plain.pf-m-no-padding--pf-v6-c-button--BackgroundColor
transparent
  • --pf-v6-c-button--BackgroundColor
  • --pf-v6-c-button--m-plain--m-no-padding--BackgroundColor
  • transparent
.pf-v6-c-button.pf-m-plain.pf-m-no-padding--pf-v6-c-button--hover--BackgroundColor
transparent
  • --pf-v6-c-button--hover--BackgroundColor
  • --pf-v6-c-button--m-plain--m-no-padding--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--m-clicked--BackgroundColor
  • --pf-v6-c-button--m-plain--m-no-padding--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--PaddingBlockStart
  • --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart
  • 0
.pf-v6-c-button.pf-m-plain.pf-m-no-padding--pf-v6-c-button--PaddingBlockEnd
0
  • --pf-v6-c-button--PaddingBlockEnd
  • --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd
  • 0
.pf-v6-c-button.pf-m-plain.pf-m-no-padding--pf-v6-c-button--PaddingInlineEnd
0
  • --pf-v6-c-button--PaddingInlineEnd
  • --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd
  • 0
.pf-v6-c-button.pf-m-plain.pf-m-no-padding--pf-v6-c-button--PaddingInlineStart
0
  • --pf-v6-c-button--PaddingInlineStart
  • --pf-v6-c-button--m-plain--m-no-padding--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--m-small--PaddingInlineEnd
  • --pf-v6-c-button--m-plain--m-no-padding--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--m-small--PaddingInlineStart
  • --pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineStart
  • 0
.pf-v6-c-button.pf-m-block--pf-v6-c-button--Display
flex
  • --pf-v6-c-button--Display
  • --pf-v6-c-button--m-block--Display
  • flex
.pf-v6-c-button.pf-m-small--pf-v6-c-button--PaddingBlockStart
0.25rem
  • --pf-v6-c-button--PaddingBlockStart
  • --pf-v6-c-button--m-small--PaddingBlockStart
  • --pf-t--global--spacer--control--vertical--compact
  • --pf-t--global--spacer--xs
  • --pf-t--global--spacer--100
  • 0.25rem
.pf-v6-c-button.pf-m-small--pf-v6-c-button--PaddingInlineEnd
1rem
  • --pf-v6-c-button--PaddingInlineEnd
  • --pf-v6-c-button--m-small--PaddingInlineEnd
  • --pf-t--global--spacer--action--horizontal--compact
  • --pf-t--global--spacer--md
  • --pf-t--global--spacer--300
  • 1rem
.pf-v6-c-button.pf-m-small--pf-v6-c-button--PaddingBlockEnd
0.25rem
  • --pf-v6-c-button--PaddingBlockEnd
  • --pf-v6-c-button--m-small--PaddingBlockEnd
  • --pf-t--global--spacer--control--vertical--compact
  • --pf-t--global--spacer--xs
  • --pf-t--global--spacer--100
  • 0.25rem
.pf-v6-c-button.pf-m-small--pf-v6-c-button--PaddingInlineStart
1rem
  • --pf-v6-c-button--PaddingInlineStart
  • --pf-v6-c-button--m-small--PaddingInlineStart
  • --pf-t--global--spacer--action--horizontal--compact
  • --pf-t--global--spacer--md
  • --pf-t--global--spacer--300
  • 1rem
.pf-v6-c-button.pf-m-display-lg--pf-v6-c-button--PaddingBlockStart
1rem
  • --pf-v6-c-button--PaddingBlockStart
  • --pf-v6-c-button--m-display-lg--PaddingBlockStart
  • --pf-t--global--spacer--control--vertical--spacious
  • --pf-t--global--spacer--md
  • --pf-t--global--spacer--300
  • 1rem
.pf-v6-c-button.pf-m-display-lg--pf-v6-c-button--PaddingInlineEnd
2rem
  • --pf-v6-c-button--PaddingInlineEnd
  • --pf-v6-c-button--m-display-lg--PaddingInlineEnd
  • --pf-t--global--spacer--action--horizontal--spacious
  • --pf-t--global--spacer--xl
  • --pf-t--global--spacer--500
  • 2rem
.pf-v6-c-button.pf-m-display-lg--pf-v6-c-button--PaddingBlockEnd
1rem
  • --pf-v6-c-button--PaddingBlockEnd
  • --pf-v6-c-button--m-display-lg--PaddingBlockEnd
  • --pf-t--global--spacer--control--vertical--spacious
  • --pf-t--global--spacer--md
  • --pf-t--global--spacer--300
  • 1rem
.pf-v6-c-button.pf-m-display-lg--pf-v6-c-button--PaddingInlineStart
2rem
  • --pf-v6-c-button--PaddingInlineStart
  • --pf-v6-c-button--m-display-lg--PaddingInlineStart
  • --pf-t--global--spacer--action--horizontal--spacious
  • --pf-t--global--spacer--xl
  • --pf-t--global--spacer--500
  • 2rem
.pf-v6-c-button.pf-m-display-lg--pf-v6-c-button--FontSize
undefined
  • --pf-v6-c-button--FontSize
  • --pf-v6-c-button--m-display-lg--FontSize
  • undefined
.pf-v6-c-button.pf-m-favorited--pf-v6-c-button__icon--Color
(In light theme) #ffcc17
  • --pf-v6-c-button__icon--Color
  • --pf-v6-c-button--m-favorited__icon--Color
  • --pf-t--global--color--favorite--default
  • --pf-t--global--color--favorite--100
  • --pf-t--color--yellow--30
  • #ffcc17
.pf-v6-c-button.pf-m-favorited--pf-v6-c-button--hover__icon--Color
(In light theme) #dca614
  • --pf-v6-c-button--hover__icon--Color
  • --pf-v6-c-button--m-favorited--hover__icon--Color
  • --pf-t--global--color--favorite--hover
  • --pf-t--global--color--favorite--200
  • --pf-t--color--yellow--40
  • #dca614
.pf-v6-c-button.pf-m-favorited--pf-v6-c-button__icon--favorite--Opacity
0
  • --pf-v6-c-button__icon--favorite--Opacity
  • --pf-v6-c-button--m-favorited__icon--favorite--Opacity
  • 0
.pf-v6-c-button.pf-m-favorited--pf-v6-c-button__icon--favorited--Opacity
1
  • --pf-v6-c-button__icon--favorited--Opacity
  • --pf-v6-c-button--m-favorited__icon--favorited--Opacity
  • 1
.pf-v6-c-button:hover--pf-v6-c-button--Color
(In light theme) #ffffff
  • --pf-v6-c-button--Color
  • --pf-v6-c-button--hover--Color
  • --pf-v6-c-button--m-primary--hover--Color
  • --pf-t--global--text--color--on-brand--hover
  • --pf-t--global--text--color--inverse
  • --pf-t--global--text--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button:hover--pf-v6-c-button--BackgroundColor
transparent
  • --pf-v6-c-button--BackgroundColor
  • --pf-v6-c-button--hover--BackgroundColor
  • transparent
.pf-v6-c-button:hover--pf-v6-c-button--BorderColor
transparent
  • --pf-v6-c-button--BorderColor
  • --pf-v6-c-button--hover--BorderColor
  • transparent
.pf-v6-c-button:hover--pf-v6-c-button--BorderWidth
2px
  • --pf-v6-c-button--BorderWidth
  • --pf-v6-c-button--hover--BorderWidth
  • --pf-t--global--border--width--action--hover
  • --pf-t--global--border--width--200
  • 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--m-plain--m-no-padding__icon--Color
  • --pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color
  • --pf-t--global--icon--color--regular
  • --pf-t--global--icon--color--100
  • --pf-t--color--gray--90
  • #1f1f1f
.pf-v6-c-button:hover--pf-v6-c-button__icon--Color
(In light theme) #1f1f1f
  • --pf-v6-c-button__icon--Color
  • --pf-v6-c-button--hover__icon--Color
  • --pf-t--global--icon--color--regular
  • --pf-t--global--icon--color--100
  • --pf-t--color--gray--90
  • #1f1f1f
.pf-v6-c-button.pf-m-clicked--pf-v6-c-button--Color
(In light theme) #ffffff
  • --pf-v6-c-button--Color
  • --pf-v6-c-button--m-clicked--Color
  • --pf-v6-c-button--m-primary--m-clicked--Color
  • --pf-t--global--text--color--on-brand--clicked
  • --pf-t--global--text--color--inverse
  • --pf-t--global--text--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-button.pf-m-clicked--pf-v6-c-button--BackgroundColor
transparent
  • --pf-v6-c-button--BackgroundColor
  • --pf-v6-c-button--m-clicked--BackgroundColor
  • transparent
.pf-v6-c-button.pf-m-clicked--pf-v6-c-button--BorderWidth
2px
  • --pf-v6-c-button--BorderWidth
  • --pf-v6-c-button--m-clicked--BorderWidth
  • --pf-t--global--border--width--action--clicked
  • --pf-t--global--border--width--200
  • 2px
.pf-v6-c-button.pf-m-clicked--pf-v6-c-button--BorderColor
transparent
  • --pf-v6-c-button--BorderColor
  • --pf-v6-c-button--m-clicked--BorderColor
  • transparent
.pf-v6-c-button.pf-m-clicked--pf-v6-c-button__icon--Color
(In light theme) #1f1f1f
  • --pf-v6-c-button__icon--Color
  • --pf-v6-c-button--m-clicked__icon--Color
  • --pf-t--global--icon--color--regular
  • --pf-t--global--icon--color--100
  • --pf-t--color--gray--90
  • #1f1f1f
.pf-v6-c-button.pf-m-aria-disabled--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine
none
  • --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine
  • --pf-v6-c-button--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--m-link--m-inline--hover--TextDecorationStyle
  • --pf-v6-c-button--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--PaddingInlineEnd
  • --pf-v6-c-button--m-progress--PaddingInlineEnd
  • calc(--pf-t--global--spacer--control--horizontal--default + --pf-v6-c-button__progress--width / 2)
  • calc(--pf-t--global--spacer--md + calc(--pf-t--global--icon--size--lg + --pf-t--global--spacer--sm) / 2)
  • calc(--pf-t--global--spacer--300 + calc(--pf-t--global--icon--size--250 + --pf-t--global--spacer--200) / 2)
  • 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--PaddingInlineStart
  • --pf-v6-c-button--m-progress--PaddingInlineStart
  • calc(--pf-t--global--spacer--control--horizontal--default + --pf-v6-c-button__progress--width / 2)
  • calc(--pf-t--global--spacer--md + calc(--pf-t--global--icon--size--lg + --pf-t--global--spacer--sm) / 2)
  • calc(--pf-t--global--spacer--300 + calc(--pf-t--global--icon--size--250 + --pf-t--global--spacer--200) / 2)
  • 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--m-link--m-inline--PaddingInlineStart
  • --pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart
  • calc(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart + 1rem + --pf-t--global--spacer--sm)
  • calc(--pf-t--global--spacer--xs + 1rem + --pf-t--global--spacer--200)
  • calc(--pf-t--global--spacer--100 + 1rem + 0.5rem)
  • 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--PaddingInlineEnd
  • --pf-v6-c-button--m-in-progress--PaddingInlineEnd
  • --pf-t--global--spacer--control--horizontal--default
  • --pf-t--global--spacer--md
  • --pf-t--global--spacer--300
  • 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--PaddingInlineStart
  • --pf-v6-c-button--m-in-progress--PaddingInlineStart
  • calc(--pf-t--global--spacer--control--horizontal--default + --pf-v6-c-button__progress--width)
  • calc(--pf-t--global--spacer--md + calc(--pf-t--global--icon--size--lg + --pf-t--global--spacer--sm))
  • calc(--pf-t--global--spacer--300 + calc(--pf-t--global--icon--size--250 + --pf-t--global--spacer--200))
  • 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__progress--InsetInlineStart
  • --pf-v6-c-button--m-in-progress--m-plain__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__progress--TranslateX
  • --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX
  • -50%
.pf-v6-c-button__icon.pf-m-start--pf-v6-c-button__icon--MarginInlineEnd
0
  • --pf-v6-c-button__icon--MarginInlineEnd
  • --pf-v6-c-button__icon--m-start--MarginInlineEnd
  • 0
.pf-v6-c-button__icon.pf-m-end--pf-v6-c-button__icon--MarginInlineStart
0
  • --pf-v6-c-button__icon--MarginInlineStart
  • --pf-v6-c-button__icon--m-end--MarginInlineStart
  • 0
.pf-v6-c-button__progress .pf-v6-c-spinner--pf-v6-c-spinner--Color
currentcolor