Skip to content

Button

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

Examples

Variations







Icon






Icon end




Clicked buttons







Icon






Icon end




Small buttons







Icon






Icon end




Disabled







Icon






Icon end




Aria-disabled







Icon






Icon end




Links as buttons

Inline link as span

Block level

Types

Call to action



disabled

Progress




Counts


disabled

Plain with no padding

For when a plain/icon button is placed inline with text .

Stateful

Read


Unread


Attention

Favorite

A favorite button should use a plain button with the star icon. Applying .pf-m-favorited to the button initiates a microanimation and indicates that the item is favorited.

Settings

Hamburger

Documentation

Overview

Always add a modifier class to add color to the button.

Button vs link

Semantic buttons and links are important for usability as well as accessibility. Using an a instead of a button element to perform user initiated actions should be avoided, unless absolutely necessary.

Accessibility

Attribute
Applied to
Outcome
aria-pressed="true or false"
.pf-v6-c-button
Indicates that the button is a toggle. When set to true, pf-m-active should also be set so that the button displays in an active state. Required when button is a toggle
aria-label="[button label text]"
.pf-v6-c-button.pf-m-plain
Provides an accessible name for the button when an icon is used instead of text. Required when icon is used with no supporting text
aria-label="[descriptive text]"
a.pf-v6-c-button, span.pf-v6-c-button.pf-m-link.pf-m-inline
The button component's text should adequately describe its purpose. If it does not, aria-label can provide more detailed interaction information.
disabled
button.pf-v6-c-button
When a button element is used, indicates that it is unavailable and removes it from keyboard focus. Required when button is disabled
aria-disabled=true
button.pf-v6-c-button
When a button element is used, indicates that it is unavailable but does not prevent keyboard or hover interactions. Used when a disabled button provides interactive elements like a tooltip.
aria-disabled=true
a.pf-v6-c-button.pf-m-disabled, span.pf-v6-c-button.pf-m-link.pf-m-inline.pf-m-disabled
When a non-button element is used, indicates that it is unavailable. Required when element is disabled
aria-expanded=true
.pf-v6-c-button.pf-m-expanded
Indicates that the expanded content element is visible. Required
tabindex="-1"
a.pf-v6-c-button.pf-m-disabled, span.pf-v6-c-button.pf-m-link.pf-m-inline.pf-m-disabled
When a non-button element is used, removes it from keyboard focus. Required when element is disabled
tabindex="0"
span.pf-v6-c-button.pf-m-link.pf-m-inline
Inserts the span into the tab order of the page so that it is focusable. Required when the element is a span

Usage

Class
Applied to
Outcome
.pf-v6-c-button
<button>, <span>
Initiates a button. Always use it with a modifier class. Required
.pf-v6-c-button__icon
<span>
Initiates a button icon.
.pf-v6-c-button__progress
<span>
Initiates a button progress container.
.pf-v6-c-button__count
<span>
Initiates a button count container. Note: Count should only be used on link buttons.
.pf-m-primary
.pf-v6-c-button
Modifies for primary styles.
.pf-m-secondary
.pf-v6-c-button
Modifies for secondary styles.
.pf-m-tertiary
.pf-v6-c-button
Modifies for tertiary styles.
.pf-m-danger
.pf-v6-c-button
Modifies for danger styles.
.pf-m-warning
.pf-v6-c-button
Modifies for warning styles.
.pf-m-link
.pf-v6-c-button
Modifies for link styles. This button has no background or border and is styled as a link. This button would commonly appear in a form and may include an icon.
.pf-m-plain
.pf-v6-c-button
Modifies for icon styles. This button has no background or border, uses a standard text color, and is used for .pf-m-plain icon buttons such as close, expand, kebab, etc.
.pf-m-no-padding
.pf-v6-c-button.pf-m-plain
Modifies a plain button to remove padding. This modifier should only be used when the button is inline within a sentence or block of text. Adjacent plain buttons without padding should always have spacing between them.
.pf-m-inline
.pf-v6-c-button.pf-m-link
Modifies for inline styles. This button is presented similar to a normal link and has no padding and is displayed inline with other inline content. When used as a <span>, the text will flow inline with text around it.
.pf-m-block
.pf-v6-c-button
Creates a block level button.
.pf-m-control
.pf-v6-c-button
Modifies for control styles. Note: This modifier should only be used when using buttons in the Input Group or Clipboard Copy components.
.pf-m-expanded
.pf-v6-c-button.pf-m-control
Modifies a control button for the expanded state.
.pf-m-start
.pf-v6-c-button__icon
Applies right spacing to an icon inside of a button when the icon comes before text.
.pf-m-end
.pf-v6-c-button__icon
Applies left spacing to an icon inside of a button when the icon comes after text.
.pf-m-active
.pf-v6-c-button
Forces display of the active state of the button. This modifier should be used when aria-pressed is set to true so that the button displays in an active state.
.pf-m-small
.pf-v6-c-button
Modifies the button for small/compact styles.
.pf-m-aria-disabled
.pf-v6-c-button
Modifies a button to be visually disabled, yet is still focusable.
.pf-m-display-lg
.pf-v6-c-button, pf-v6-c-button.pf-m-link
Modifies the button and link button for large display styling. For example, use this modifier to achieve "call to action" styles.
.pf-m-progress
.pf-v6-c-button
Indicates that the button supports the progress state. Note: Not used with the plain variation.
.pf-m-in-progress
.pf-v6-c-button
Indicates that the button is in the in progress state.
.pf-m-stateful
.pf-v6-c-button
Indicates that the button is used for one of read, unread, and attention states. Note: Always use with a modifier of .pf-m-read, .pf-m-unread, or .pf-m-attention.
.pf-m-notify
.pf-v6-c-button
Indicates that the button should show the user notification of an event. Note: This is intended for use with a bell icon in the notification badge.
.pf-m-favorite
.pf-v6-c-button.pf-m-plain
Modifies a plain button to be a favorite button. Note: This is intended for use with a star icon.
.pf-m-favorited
.pf-v6-c-button.pf-m-plain.pf-m-favorite
Modifies a favorite button to indicate that item is favorited.
.pf-m-settings
.pf-v6-c-button.pf-m-plain
Modifies a plain button to be a settings button.
.pf-m-hamburger
.pf-v6-c-button.pf-m-plain
Modifies a plain button to be a hamburger button.
.pf-m-expand
.pf-v6-c-button.pf-m-hamburger
Modifies a hamburger button to indicate that it will expand a menu.
.pf-m-collapse
.pf-v6-c-button.pf-m-hamburger
Modifies a hamburger button to indicate that it will collapse a menu.

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--TransitionDelay
0s
.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, .7, .2)
  • --pf-v6-c-button--TransitionTimingFunction
  • --pf-t--global--motion--timing-function--accelerate
  • --pf-t--global--timing-function--100
  • cubic-bezier(.4, 0, .7, .2)
.pf-v6-c-button--pf-v6-c-button--TransitionProperty
color, background, border-width, border-color
.pf-v6-c-button--pf-v6-c-button--ScaleX
1
.pf-v6-c-button--pf-v6-c-button--ScaleY
1
.pf-v6-c-button--pf-v6-c-button--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--hover--ScaleX
1
.pf-v6-c-button--pf-v6-c-button--hover--ScaleY
1
.pf-v6-c-button--pf-v6-c-button--m-clicked--BackgroundColor
transparent
.pf-v6-c-button--pf-v6-c-button--m-clicked--BorderColor
transparent
.pf-v6-c-button--pf-v6-c-button--m-clicked--BorderWidth
2px
  • --pf-v6-c-button--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__icon--TransitionDelay
0s
.pf-v6-c-button--pf-v6-c-button__icon--TransitionTimingFunction
auto
.pf-v6-c-button--pf-v6-c-button__icon--TransitionDuration
0s
.pf-v6-c-button--pf-v6-c-button__icon--TransitionProperty
none
.pf-v6-c-button--pf-v6-c-button__icon--Rotate
0deg
.pf-v6-c-button--pf-v6-c-button--hover__icon--TransitionTimingFunction
auto
.pf-v6-c-button--pf-v6-c-button--hover__icon--TransitionDuration
0s
.pf-v6-c-button--pf-v6-c-button--hover__icon--TransitionProperty
none
.pf-v6-c-button--pf-v6-c-button--hover__icon--Rotate
0deg
.pf-v6-c-button--pf-v6-c-button__icon--ScaleX
1
.pf-v6-c-button--pf-v6-c-button__icon--ScaleY
1
.pf-v6-c-button--pf-v6-c-button--hover__icon--ScaleX
1
.pf-v6-c-button--pf-v6-c-button--hover__icon--ScaleY
1
.pf-v6-c-button--pf-v6-c-button--m-favorite__icon--TransitionDuration
100ms
  • --pf-v6-c-button--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-settings__icon--TransitionDuration
200ms
  • --pf-v6-c-button--m-settings__icon--TransitionDuration
  • --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-settings__icon--TransitionTimingFunction
cubic-bezier(.4, 0, .7, .2)
  • --pf-v6-c-button--m-settings__icon--TransitionTimingFunction
  • --pf-t--global--motion--timing-function--accelerate
  • --pf-t--global--timing-function--100
  • cubic-bezier(.4, 0, .7, .2)
.pf-v6-c-button--pf-v6-c-button--m-settings--hover__icon--TransitionDuration
200ms
  • --pf-v6-c-button--m-settings--hover__icon--TransitionDuration
  • --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-settings--hover__icon--TransitionTimingFunction
cubic-bezier(0, 0, .2, 1)
  • --pf-v6-c-button--m-settings--hover__icon--TransitionTimingFunction
  • --pf-t--global--motion--timing-function--decelerate
  • --pf-t--global--timing-function--300
  • cubic-bezier(0, 0, .2, 1)
.pf-v6-c-button--pf-v6-c-button--m-settings--hover__icon--Rotate
60deg
.pf-v6-c-button--pf-v6-c-button--m-primary__c-badge--BorderColor
(In light theme) #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-v6-c-button--hamburger-icon--TransitionTimingFunction
cubic-bezier(0, 0, .2, 1)
  • --pf-v6-c-button--hamburger-icon--TransitionTimingFunction
  • --pf-t--global--motion--timing-function--decelerate
  • --pf-t--global--timing-function--300
  • cubic-bezier(0, 0, .2, 1)
.pf-v6-c-button--pf-v6-c-button--hamburger-icon--TransitionDuration
200ms
  • --pf-v6-c-button--hamburger-icon--TransitionDuration
  • --pf-t--global--motion--duration--md
  • --pf-t--global--duration--200
  • 200ms
.pf-v6-c-button--pf-v6-c-button--hamburger-icon--top--path--base
path("M1,1 L9,1")
.pf-v6-c-button--pf-v6-c-button--hamburger-icon--middle--path--base
path("M1,5 L9,5")
.pf-v6-c-button--pf-v6-c-button--hamburger-icon--arrow--path--base
path("M1,5 L1,5 L1,5")
.pf-v6-c-button--pf-v6-c-button--hamburger-icon--bottom--path--base
path("M9,9 L1,9")
.pf-v6-c-button--pf-v6-c-button--hamburger-icon--top--path
path("M1,1 L9,1")
  • --pf-v6-c-button--hamburger-icon--top--path
  • --pf-v6-c-button--hamburger-icon--top--path--base
  • path("M1,1 L9,1")
.pf-v6-c-button--pf-v6-c-button--hamburger-icon--middle--path
path("M1,5 L9,5")
  • --pf-v6-c-button--hamburger-icon--middle--path
  • --pf-v6-c-button--hamburger-icon--middle--path--base
  • path("M1,5 L9,5")
.pf-v6-c-button--pf-v6-c-button--hamburger-icon--arrow--path
path("M1,5 L1,5 L1,5")
  • --pf-v6-c-button--hamburger-icon--arrow--path
  • --pf-v6-c-button--hamburger-icon--arrow--path--base
  • path("M1,5 L1,5 L1,5")
.pf-v6-c-button--pf-v6-c-button--hamburger-icon--bottom--path
path("M9,9 L1,9")
  • --pf-v6-c-button--hamburger-icon--bottom--path
  • --pf-v6-c-button--hamburger-icon--bottom--path--base
  • path("M9,9 L1,9")
.pf-v6-c-button--pf-v6-c-button--hamburger-icon--top--collapse--path
path("M5,1 L9,1")
.pf-v6-c-button--pf-v6-c-button--hamburger-icon--arrow--collapse--path
path("M3,7 L1,5 L3,3")
.pf-v6-c-button--pf-v6-c-button--hamburger-icon--bottom--collapse--path
path("M9,9 L5,9")
.pf-v6-c-button--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX
-1
.pf-v6-c-button.pf-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--m-plain--m-no-padding__icon--Color
(In light theme) #ffcc17
  • --pf-v6-c-button--m-plain--m-no-padding__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--m-plain--m-no-padding--hover__icon--Color
(In light theme) #dca614
  • --pf-v6-c-button--m-plain--m-no-padding--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.pf-m-settings--pf-v6-c-button__icon--TransitionProperty
rotate
.pf-v6-c-button.pf-m-settings--pf-v6-c-button__icon--TransitionDuration
200ms
  • --pf-v6-c-button__icon--TransitionDuration
  • --pf-v6-c-button--m-settings__icon--TransitionDuration
  • --pf-t--global--motion--duration--icon--long
  • --pf-t--global--motion--duration--md
  • --pf-t--global--duration--200
  • 200ms
.pf-v6-c-button.pf-m-settings--pf-v6-c-button__icon--TransitionTimingFunction
cubic-bezier(.4, 0, .7, .2)
  • --pf-v6-c-button__icon--TransitionTimingFunction
  • --pf-v6-c-button--m-settings__icon--TransitionTimingFunction
  • --pf-t--global--motion--timing-function--accelerate
  • --pf-t--global--timing-function--100
  • cubic-bezier(.4, 0, .7, .2)
.pf-v6-c-button.pf-m-settings--pf-v6-c-button--hover__icon--TransitionProperty
rotate
.pf-v6-c-button.pf-m-settings--pf-v6-c-button--hover__icon--TransitionDuration
200ms
  • --pf-v6-c-button--hover__icon--TransitionDuration
  • --pf-v6-c-button--m-settings--hover__icon--TransitionDuration
  • --pf-t--global--motion--duration--icon--long
  • --pf-t--global--motion--duration--md
  • --pf-t--global--duration--200
  • 200ms
.pf-v6-c-button.pf-m-settings--pf-v6-c-button--hover__icon--TransitionTimingFunction
cubic-bezier(0, 0, .2, 1)
  • --pf-v6-c-button--hover__icon--TransitionTimingFunction
  • --pf-v6-c-button--m-settings--hover__icon--TransitionTimingFunction
  • --pf-t--global--motion--timing-function--decelerate
  • --pf-t--global--timing-function--300
  • cubic-bezier(0, 0, .2, 1)
.pf-v6-c-button.pf-m-settings--pf-v6-c-button--hover__icon--Rotate
60deg
  • --pf-v6-c-button--hover__icon--Rotate
  • --pf-v6-c-button--m-settings--hover__icon--Rotate
  • 60deg
.pf-v6-c-button.pf-m-hamburger--pf-v6-c-button__icon--TransitionDelay
200ms
  • --pf-v6-c-button__icon--TransitionDelay
  • --pf-v6-c-button--hamburger-icon--TransitionDuration
  • --pf-t--global--motion--duration--md
  • --pf-t--global--duration--200
  • 200ms
.pf-v6-c-button.pf-m-hamburger--pf-v6-c-button__icon--TransitionDuration
0s
.pf-v6-c-button.pf-m-hamburger--pf-v6-c-button__icon--TransitionProperty
scale
.pf-v6-c-button.pf-m-hamburger--pf-v6-c-button--hover__icon--TransitionDelay
200ms
  • --pf-v6-c-button--hover__icon--TransitionDelay
  • --pf-v6-c-button--hamburger-icon--TransitionDuration
  • --pf-t--global--motion--duration--md
  • --pf-t--global--duration--200
  • 200ms
.pf-v6-c-button.pf-m-hamburger--pf-v6-c-button--hover__icon--TransitionDuration
0s
.pf-v6-c-button.pf-m-hamburger--pf-v6-c-button--hover__icon--TransitionProperty
scale
.pf-v6-c-button.pf-m-hamburger.pf-m-expand--pf-v6-c-button--hamburger-icon--top--path
path("M5,1 L9,1")
  • --pf-v6-c-button--hamburger-icon--top--path
  • --pf-v6-c-button--hamburger-icon--top--collapse--path
  • path("M5,1 L9,1")
.pf-v6-c-button.pf-m-hamburger.pf-m-expand--pf-v6-c-button--hamburger-icon--arrow--path
path("M3,7 L1,5 L3,3")
  • --pf-v6-c-button--hamburger-icon--arrow--path
  • --pf-v6-c-button--hamburger-icon--arrow--collapse--path
  • path("M3,7 L1,5 L3,3")
.pf-v6-c-button.pf-m-hamburger.pf-m-expand--pf-v6-c-button--hamburger-icon--bottom--path
path("M9,9 L5,9")
  • --pf-v6-c-button--hamburger-icon--bottom--path
  • --pf-v6-c-button--hamburger-icon--bottom--collapse--path
  • path("M9,9 L5,9")
.pf-v6-c-button.pf-m-hamburger.pf-m-expand--pf-v6-c-button__icon--TransitionDelay
0s
.pf-v6-c-button.pf-m-hamburger.pf-m-expand--pf-v6-c-button__icon--ScaleX
-1
  • --pf-v6-c-button__icon--ScaleX
  • --pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX
  • -1
.pf-v6-c-button.pf-m-hamburger.pf-m-expand--pf-v6-c-button--hover__icon--TransitionDelay
0s
.pf-v6-c-button.pf-m-hamburger.pf-m-expand--pf-v6-c-button--hover__icon--ScaleX
-1
  • --pf-v6-c-button--hover__icon--ScaleX
  • --pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX
  • -1
.pf-v6-c-button.pf-m-hamburger.pf-m-collapse--pf-v6-c-button--hamburger-icon--top--path
path("M5,1 L9,1")
  • --pf-v6-c-button--hamburger-icon--top--path
  • --pf-v6-c-button--hamburger-icon--top--collapse--path
  • path("M5,1 L9,1")
.pf-v6-c-button.pf-m-hamburger.pf-m-collapse--pf-v6-c-button--hamburger-icon--arrow--path
path("M3,7 L1,5 L3,3")
  • --pf-v6-c-button--hamburger-icon--arrow--path
  • --pf-v6-c-button--hamburger-icon--arrow--collapse--path
  • path("M3,7 L1,5 L3,3")
.pf-v6-c-button.pf-m-hamburger.pf-m-collapse--pf-v6-c-button--hamburger-icon--bottom--path
path("M9,9 L5,9")
  • --pf-v6-c-button--hamburger-icon--bottom--path
  • --pf-v6-c-button--hamburger-icon--bottom--collapse--path
  • path("M9,9 L5,9")
.pf-v6-c-button.pf-m-hamburger.pf-m-collapse--pf-v6-c-button__icon--TransitionDelay
0s
.pf-v6-c-button.pf-m-hamburger.pf-m-collapse--pf-v6-c-button__icon--ScaleX
1
.pf-v6-c-button.pf-m-hamburger.pf-m-collapse--pf-v6-c-button--hover__icon--TransitionDelay
0s
.pf-v6-c-button.pf-m-hamburger.pf-m-collapse--pf-v6-c-button--hover__icon--ScaleX
1
.pf-v6-c-button: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--ScaleX
1
  • --pf-v6-c-button--ScaleX
  • --pf-v6-c-button--hover--ScaleX
  • 1
.pf-v6-c-button:hover--pf-v6-c-button--ScaleY
1
  • --pf-v6-c-button--ScaleY
  • --pf-v6-c-button--hover--ScaleY
  • 1
.pf-v6-c-button:hover--pf-v6-c-button--m-plain--m-no-padding__icon--Color
(In light theme) #1f1f1f
  • --pf-v6-c-button--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:hover--pf-v6-c-button__icon--TransitionTimingFunction
auto
  • --pf-v6-c-button__icon--TransitionTimingFunction
  • --pf-v6-c-button--hover__icon--TransitionTimingFunction
  • auto
.pf-v6-c-button:hover--pf-v6-c-button__icon--TransitionDuration
0s
  • --pf-v6-c-button__icon--TransitionDuration
  • --pf-v6-c-button--hover__icon--TransitionDuration
  • 0s
.pf-v6-c-button:hover--pf-v6-c-button__icon--TransitionProperty
none
  • --pf-v6-c-button__icon--TransitionProperty
  • --pf-v6-c-button--hover__icon--TransitionProperty
  • none
.pf-v6-c-button:hover--pf-v6-c-button__icon--Rotate
0deg
  • --pf-v6-c-button__icon--Rotate
  • --pf-v6-c-button--hover__icon--Rotate
  • 0deg
.pf-v6-c-button:hover--pf-v6-c-button__icon--ScaleX
1
  • --pf-v6-c-button__icon--ScaleX
  • --pf-v6-c-button--hover__icon--ScaleX
  • 1
.pf-v6-c-button:hover--pf-v6-c-button__icon--ScaleY
1
  • --pf-v6-c-button__icon--ScaleY
  • --pf-v6-c-button--hover__icon--ScaleY
  • 1
.pf-v6-c-button:active--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:active--pf-v6-c-button--BackgroundColor
transparent
  • --pf-v6-c-button--BackgroundColor
  • --pf-v6-c-button--m-clicked--BackgroundColor
  • transparent
.pf-v6-c-button:active--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:active--pf-v6-c-button--BorderColor
transparent
  • --pf-v6-c-button--BorderColor
  • --pf-v6-c-button--m-clicked--BorderColor
  • transparent
.pf-v6-c-button:active--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

Edit this page on GitHub
Red Hat
Copyright © 2014-2025 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines