Skip to content
PatternFly logo

Button

A button is a box area or text that communicates and triggers user actions when clicked or selected. Buttons can be used to communicate and immediately trigger actions a user can take in an application, like submitting a form, canceling a process, or creating a new object. Buttons can also be used to take a user to a new location, like another page inside of a web application, or an external site such as help or documentation.

Examples

Variations










Disabled

Aria-disabled

Block level

Types

Call to action

Progress




Documentation

Overview

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

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-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-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-c-button, span.pf-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-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-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-c-button.pf-m-disabled, span.pf-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-c-button.pf-m-expanded
Indicates that the expanded content element is visible. Required
tabindex="-1"
a.pf-c-button.pf-m-disabled, span.pf-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-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-c-button
<button>
Initiates a button. Always use it with a modifier class. Required
.pf-c-button__icon
<span>
Initiates a button icon.
.pf-c-button__progress
<span>
Initiates a button progress container.
.pf-c-button__count
<span>
Initiates a button count container. Note: Count should only be used on link buttons.
.pf-m-primary
.pf-c-button
Modifies for primary styles.
.pf-m-secondary
.pf-c-button
Modifies for secondary styles.
.pf-m-tertiary
.pf-c-button
Modifies for tertiary styles.
.pf-m-danger
.pf-c-button
Modifies for danger styles.
.pf-m-link
.pf-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-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-inline
.pf-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-c-button
Creates a block level button.
.pf-m-control
.pf-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-c-button.pf-m-control
Modifies a control button for the expanded state.
.pf-m-start
.pf-c-button__icon
Applies right spacing to an icon inside of a button when the icon comes before text.
.pf-m-end
.pf-c-button__icon
Applies left spacing to an icon inside of a button when the icon comes after text.
.pf-m-active
.pf-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-c-button
Modifies the button so that it has small font size.
.pf-m-aria-disabled
.pf-c-button
Modifies a button to be visually disabled, yet is still focusable.
.pf-m-display-lg
.pf-c-button, pf-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-c-button
Indicates that the button supports the progress state. Note: Not used with the plain variation.
.pf-m-in-progress
.pf-c-button
Indicates that the button is in the in progress state.

CSS variables

.pf-c-button--pf-c-button--PaddingTop
0.375rem
.pf-c-button--pf-c-button--PaddingRight
1rem
.pf-c-button--pf-c-button--PaddingBottom
0.375rem
.pf-c-button--pf-c-button--PaddingLeft
1rem
.pf-c-button--pf-c-button--LineHeight
1.5
.pf-c-button--pf-c-button--FontWeight
400
.pf-c-button--pf-c-button--FontSize
1rem
.pf-c-button--pf-c-button--BackgroundColor
transparent
.pf-c-button--pf-c-button--BorderRadius
3px
.pf-c-button--pf-c-button--after--BorderRadius
3px
.pf-c-button--pf-c-button--after--BorderColor
transparent
.pf-c-button--pf-c-button--after--BorderWidth
1px
.pf-c-button--pf-c-button--hover--after--BorderWidth
2px
.pf-c-button--pf-c-button--focus--after--BorderWidth
2px
.pf-c-button--pf-c-button--active--after--BorderWidth
2px
.pf-c-button--pf-c-button--disabled--Color
#6a6e73
.pf-c-button--pf-c-button--disabled--BackgroundColor
#d2d2d2
.pf-c-button--pf-c-button--disabled--after--BorderColor
transparent
.pf-c-button--pf-c-button--m-primary--BackgroundColor
#06c
.pf-c-button--pf-c-button--m-primary--Color
#fff
.pf-c-button--pf-c-button--m-primary--hover--BackgroundColor
#004080
.pf-c-button--pf-c-button--m-primary--hover--Color
#fff
.pf-c-button--pf-c-button--m-primary--focus--BackgroundColor
#004080
.pf-c-button--pf-c-button--m-primary--focus--Color
#fff
.pf-c-button--pf-c-button--m-primary--active--BackgroundColor
#004080
.pf-c-button--pf-c-button--m-primary--active--Color
#fff
.pf-c-button--pf-c-button--m-secondary--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-secondary--after--BorderColor
#06c
.pf-c-button--pf-c-button--m-secondary--Color
#06c
.pf-c-button--pf-c-button--m-secondary--hover--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-secondary--hover--after--BorderColor
#06c
.pf-c-button--pf-c-button--m-secondary--hover--Color
#06c
.pf-c-button--pf-c-button--m-secondary--focus--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-secondary--focus--after--BorderColor
#06c
.pf-c-button--pf-c-button--m-secondary--focus--Color
#06c
.pf-c-button--pf-c-button--m-secondary--active--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-secondary--active--after--BorderColor
#06c
.pf-c-button--pf-c-button--m-secondary--active--Color
#06c
.pf-c-button--pf-c-button--m-secondary--m-danger--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-secondary--m-danger--Color
#c9190b
.pf-c-button--pf-c-button--m-secondary--m-danger--after--BorderColor
#c9190b
.pf-c-button--pf-c-button--m-secondary--m-danger--hover--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-secondary--m-danger--hover--Color
#a30000
.pf-c-button--pf-c-button--m-secondary--m-danger--hover--after--BorderColor
#c9190b
.pf-c-button--pf-c-button--m-secondary--m-danger--focus--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-secondary--m-danger--focus--Color
#a30000
.pf-c-button--pf-c-button--m-secondary--m-danger--focus--after--BorderColor
#c9190b
.pf-c-button--pf-c-button--m-secondary--m-danger--active--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-secondary--m-danger--active--Color
#a30000
.pf-c-button--pf-c-button--m-secondary--m-danger--active--after--BorderColor
#c9190b
.pf-c-button--pf-c-button--m-tertiary--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-tertiary--after--BorderColor
#151515
.pf-c-button--pf-c-button--m-tertiary--Color
#151515
.pf-c-button--pf-c-button--m-tertiary--hover--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-tertiary--hover--after--BorderColor
#151515
.pf-c-button--pf-c-button--m-tertiary--hover--Color
#151515
.pf-c-button--pf-c-button--m-tertiary--focus--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-tertiary--focus--after--BorderColor
#151515
.pf-c-button--pf-c-button--m-tertiary--focus--Color
#151515
.pf-c-button--pf-c-button--m-tertiary--active--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-tertiary--active--after--BorderColor
#151515
.pf-c-button--pf-c-button--m-tertiary--active--Color
#151515
.pf-c-button--pf-c-button--m-warning--BackgroundColor
#f0ab00
.pf-c-button--pf-c-button--m-warning--Color
#151515
.pf-c-button--pf-c-button--m-warning--hover--BackgroundColor
#c58c00
.pf-c-button--pf-c-button--m-warning--hover--Color
#151515
.pf-c-button--pf-c-button--m-warning--focus--BackgroundColor
#c58c00
.pf-c-button--pf-c-button--m-warning--focus--Color
#151515
.pf-c-button--pf-c-button--m-warning--active--BackgroundColor
#c58c00
.pf-c-button--pf-c-button--m-warning--active--Color
#151515
.pf-c-button--pf-c-button--m-danger--BackgroundColor
#c9190b
.pf-c-button--pf-c-button--m-danger--Color
#fff
.pf-c-button--pf-c-button--m-danger--hover--BackgroundColor
#a30000
.pf-c-button--pf-c-button--m-danger--hover--Color
#fff
.pf-c-button--pf-c-button--m-danger--focus--BackgroundColor
#a30000
.pf-c-button--pf-c-button--m-danger--focus--Color
#fff
.pf-c-button--pf-c-button--m-danger--active--BackgroundColor
#a30000
.pf-c-button--pf-c-button--m-danger--active--Color
#fff
.pf-c-button--pf-c-button--m-link--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-link--Color
#06c
.pf-c-button--pf-c-button--m-link--hover--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-link--hover--Color
#004080
.pf-c-button--pf-c-button--m-link--focus--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-link--focus--Color
#004080
.pf-c-button--pf-c-button--m-link--active--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-link--active--Color
#004080
.pf-c-button--pf-c-button--m-link--disabled--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-link--m-inline--FontSize
inherit
.pf-c-button--pf-c-button--m-link--m-inline--hover--TextDecoration
underline
.pf-c-button--pf-c-button--m-link--m-inline--hover--Color
#004080
.pf-c-button--pf-c-button--m-link--m-inline--PaddingTop
0
.pf-c-button--pf-c-button--m-link--m-inline--PaddingRight
0
.pf-c-button--pf-c-button--m-link--m-inline--PaddingBottom
0
.pf-c-button--pf-c-button--m-link--m-inline--PaddingLeft
0
.pf-c-button--pf-c-button--m-link--m-inline__progress--Left
0.25rem
.pf-c-button--pf-c-button--m-link--m-inline--m-in-progress--PaddingLeft
calc(0.25rem + 1rem + 0.5rem)
.pf-c-button--pf-c-button--m-link--m-danger--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-link--m-danger--Color
#c9190b
.pf-c-button--pf-c-button--m-link--m-danger--hover--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-link--m-danger--hover--Color
#a30000
.pf-c-button--pf-c-button--m-link--m-danger--focus--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-link--m-danger--focus--Color
#a30000
.pf-c-button--pf-c-button--m-link--m-danger--active--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-link--m-danger--active--Color
#a30000
.pf-c-button--pf-c-button--m-plain--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-plain--Color
#6a6e73
.pf-c-button--pf-c-button--m-plain--hover--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-plain--hover--Color
#151515
.pf-c-button--pf-c-button--m-plain--focus--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-plain--focus--Color
#151515
.pf-c-button--pf-c-button--m-plain--active--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-plain--active--Color
#151515
.pf-c-button--pf-c-button--m-plain--disabled--Color
#d2d2d2
.pf-c-button--pf-c-button--m-plain--disabled--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-control--BackgroundColor
#fff
.pf-c-button--pf-c-button--m-control--Color
#151515
.pf-c-button--pf-c-button--m-control--BorderRadius
0
.pf-c-button--pf-c-button--m-control--after--BorderWidth
1px
.pf-c-button--pf-c-button--m-control--after--BorderTopColor
#f0f0f0
.pf-c-button--pf-c-button--m-control--after--BorderRightColor
#f0f0f0
.pf-c-button--pf-c-button--m-control--after--BorderBottomColor
#8a8d90
.pf-c-button--pf-c-button--m-control--after--BorderLeftColor
#f0f0f0
.pf-c-button--pf-c-button--m-control--disabled--BackgroundColor
#f0f0f0
.pf-c-button--pf-c-button--m-control--hover--BackgroundColor
#fff
.pf-c-button--pf-c-button--m-control--hover--Color
#151515
.pf-c-button--pf-c-button--m-control--hover--after--BorderBottomWidth
2px
.pf-c-button--pf-c-button--m-control--hover--after--BorderBottomColor
#06c
.pf-c-button--pf-c-button--m-control--active--BackgroundColor
#fff
.pf-c-button--pf-c-button--m-control--active--Color
#151515
.pf-c-button--pf-c-button--m-control--active--after--BorderBottomWidth
2px
.pf-c-button--pf-c-button--m-control--active--after--BorderBottomColor
#06c
.pf-c-button--pf-c-button--m-control--focus--BackgroundColor
#fff
.pf-c-button--pf-c-button--m-control--focus--Color
#151515
.pf-c-button--pf-c-button--m-control--focus--after--BorderBottomWidth
2px
.pf-c-button--pf-c-button--m-control--focus--after--BorderBottomColor
#06c
.pf-c-button--pf-c-button--m-control--m-expanded--BackgroundColor
#fff
.pf-c-button--pf-c-button--m-control--m-expanded--Color
#151515
.pf-c-button--pf-c-button--m-control--m-expanded--after--BorderBottomWidth
2px
.pf-c-button--pf-c-button--m-control--m-expanded--after--BorderBottomColor
#06c
.pf-c-button--pf-c-button--m-small--FontSize
0.875rem
.pf-c-button--pf-c-button--m-display-lg--PaddingTop
1rem
.pf-c-button--pf-c-button--m-display-lg--PaddingRight
2rem
.pf-c-button--pf-c-button--m-display-lg--PaddingBottom
1rem
.pf-c-button--pf-c-button--m-display-lg--PaddingLeft
2rem
.pf-c-button--pf-c-button--m-display-lg--FontWeight
700
.pf-c-button--pf-c-button--m-link--m-display-lg--FontSize
1.125rem
.pf-c-button--pf-c-button__icon--m-start--MarginRight
0.25rem
.pf-c-button--pf-c-button__icon--m-end--MarginLeft
0.25rem
.pf-c-button--pf-c-button__progress--width
calc(1.125rem + 0.5rem)
.pf-c-button--pf-c-button__progress--Opacity
0
.pf-c-button--pf-c-button__progress--TranslateY
-50%
.pf-c-button--pf-c-button__progress--TranslateX
0
.pf-c-button--pf-c-button__progress--Top
50%
.pf-c-button--pf-c-button__progress--Left
1rem
.pf-c-button--pf-c-button--m-progress--TransitionProperty
padding
.pf-c-button--pf-c-button--m-progress--TransitionDuration
250ms
.pf-c-button--pf-c-button--m-progress--PaddingRight
calc(1rem + calc(1.125rem + 0.5rem) / 2)
.pf-c-button--pf-c-button--m-progress--PaddingLeft
calc(1rem + calc(1.125rem + 0.5rem) / 2)
.pf-c-button--pf-c-button--m-in-progress--PaddingRight
1rem
.pf-c-button--pf-c-button--m-in-progress--PaddingLeft
calc(1rem + calc(1.125rem + 0.5rem))
.pf-c-button--pf-c-button--m-in-progress--m-plain--Color
#06c
.pf-c-button--pf-c-button--m-in-progress--m-plain__progress--Left
50%
.pf-c-button--pf-c-button--m-in-progress--m-plain__progress--TranslateX
-50%
.pf-c-button--pf-c-button__count--MarginLeft
0.5rem
.pf-c-button--pf-c-button--disabled__c-badge--Color
#151515
.pf-c-button--pf-c-button--disabled__c-badge--BackgroundColor
#f0f0f0
.pf-c-button--pf-c-button--m-primary__c-badge--BorderColor
#f0f0f0
.pf-c-button--pf-c-button--m-primary__c-badge--BorderWidth
1px
.pf-c-button:hover--pf-c-button--after--BorderWidth
2px
.pf-c-button:focus--pf-c-button--after--BorderWidth
2px
.pf-c-button:active--pf-c-button--after--BorderWidth
2px
.pf-c-button.pf-m-small--pf-c-button--FontSize
0.875rem
.pf-c-button.pf-m-primary.pf-m-display-lg--pf-c-button--PaddingTop
1rem
.pf-c-button.pf-m-primary.pf-m-display-lg--pf-c-button--PaddingRight
2rem
.pf-c-button.pf-m-primary.pf-m-display-lg--pf-c-button--PaddingBottom
1rem
.pf-c-button.pf-m-primary.pf-m-display-lg--pf-c-button--PaddingLeft
2rem
.pf-c-button.pf-m-primary.pf-m-display-lg--pf-c-button--FontWeight
700
.pf-c-button.pf-m-primary:hover--pf-c-button--m-primary--Color
#fff
.pf-c-button.pf-m-primary:hover--pf-c-button--m-primary--BackgroundColor
#004080
.pf-c-button.pf-m-primary:focus--pf-c-button--m-primary--Color
#fff
.pf-c-button.pf-m-primary:focus--pf-c-button--m-primary--BackgroundColor
#004080
.pf-c-button.pf-m-primary:active--pf-c-button--m-primary--Color
#fff
.pf-c-button.pf-m-primary:active--pf-c-button--m-primary--BackgroundColor
#004080
.pf-c-button.pf-m-secondary--pf-c-button--after--BorderColor
#06c
.pf-c-button.pf-m-secondary:hover--pf-c-button--m-secondary--Color
#06c
.pf-c-button.pf-m-secondary:hover--pf-c-button--m-secondary--BackgroundColor
transparent
.pf-c-button.pf-m-secondary:hover--pf-c-button--after--BorderColor
#06c
.pf-c-button.pf-m-secondary:focus--pf-c-button--m-secondary--Color
#06c
.pf-c-button.pf-m-secondary:focus--pf-c-button--m-secondary--BackgroundColor
transparent
.pf-c-button.pf-m-secondary:focus--pf-c-button--after--BorderColor
#06c
.pf-c-button.pf-m-secondary.pf-m-active--pf-c-button--m-secondary--Color
#06c
.pf-c-button.pf-m-secondary.pf-m-active--pf-c-button--m-secondary--BackgroundColor
transparent
.pf-c-button.pf-m-secondary.pf-m-active--pf-c-button--after--BorderColor
#06c
.pf-c-button.pf-m-tertiary--pf-c-button--after--BorderColor
#151515
.pf-c-button.pf-m-tertiary:hover--pf-c-button--m-tertiary--Color
#151515
.pf-c-button.pf-m-tertiary:hover--pf-c-button--m-tertiary--BackgroundColor
transparent
.pf-c-button.pf-m-tertiary:hover--pf-c-button--after--BorderColor
#151515
.pf-c-button.pf-m-tertiary:focus--pf-c-button--m-tertiary--Color
#151515
.pf-c-button.pf-m-tertiary:focus--pf-c-button--m-tertiary--BackgroundColor
transparent
.pf-c-button.pf-m-tertiary:focus--pf-c-button--after--BorderColor
#151515
.pf-c-button.pf-m-tertiary:active--pf-c-button--m-tertiary--Color
#151515
.pf-c-button.pf-m-tertiary:active--pf-c-button--m-tertiary--BackgroundColor
transparent
.pf-c-button.pf-m-tertiary:active--pf-c-button--after--BorderColor
#151515
.pf-c-button.pf-m-link--pf-c-button--disabled--BackgroundColor
transparent
.pf-c-button.pf-m-link:not(.pf-m-inline):hover--pf-c-button--m-link--Color
#004080
.pf-c-button.pf-m-link:not(.pf-m-inline):hover--pf-c-button--m-link--BackgroundColor
transparent
.pf-c-button.pf-m-link:not(.pf-m-inline):focus--pf-c-button--m-link--Color
#004080
.pf-c-button.pf-m-link:not(.pf-m-inline):focus--pf-c-button--m-link--BackgroundColor
transparent
.pf-c-button.pf-m-link:not(.pf-m-inline):active--pf-c-button--m-link--Color
#004080
.pf-c-button.pf-m-link:not(.pf-m-inline):active--pf-c-button--m-link--BackgroundColor
transparent
.pf-c-button.pf-m-link.pf-m-inline--pf-c-button--FontSize
inherit
.pf-c-button.pf-m-link.pf-m-inline--pf-c-button__progress--Left
0.25rem
.pf-c-button.pf-m-link.pf-m-inline:hover--pf-c-button--m-link--Color
#004080
.pf-c-button.pf-m-link.pf-m-display-lg--pf-c-button--FontSize
1.125rem
.pf-c-button.pf-m-danger:hover--pf-c-button--m-danger--Color
#fff
.pf-c-button.pf-m-danger:hover--pf-c-button--m-danger--BackgroundColor
#a30000
.pf-c-button.pf-m-danger:focus--pf-c-button--m-danger--Color
#fff
.pf-c-button.pf-m-danger:focus--pf-c-button--m-danger--BackgroundColor
#a30000
.pf-c-button.pf-m-danger:active--pf-c-button--m-danger--Color
#fff
.pf-c-button.pf-m-danger:active--pf-c-button--m-danger--BackgroundColor
#a30000
.pf-c-button.pf-m-danger.pf-m-secondary--pf-c-button--m-danger--Color
#c9190b
.pf-c-button.pf-m-danger.pf-m-secondary--pf-c-button--m-danger--BackgroundColor
transparent
.pf-c-button.pf-m-danger.pf-m-secondary--pf-c-button--after--BorderColor
#c9190b
.pf-c-button.pf-m-danger.pf-m-secondary:hover--pf-c-button--m-secondary--m-danger--Color
#a30000
.pf-c-button.pf-m-danger.pf-m-secondary:hover--pf-c-button--m-secondary--m-danger--BackgroundColor
transparent
.pf-c-button.pf-m-danger.pf-m-secondary:hover--pf-c-button--after--BorderColor
#c9190b
.pf-c-button.pf-m-danger.pf-m-secondary:focus--pf-c-button--m-secondary--m-danger--Color
#a30000
.pf-c-button.pf-m-danger.pf-m-secondary:focus--pf-c-button--m-secondary--m-danger--BackgroundColor
transparent
.pf-c-button.pf-m-danger.pf-m-secondary:focus--pf-c-button--after--BorderColor
#c9190b
.pf-c-button.pf-m-danger.pf-m-secondary:active--pf-c-button--m-secondary--m-danger--Color
#a30000
.pf-c-button.pf-m-danger.pf-m-secondary:active--pf-c-button--m-secondary--m-danger--BackgroundColor
transparent
.pf-c-button.pf-m-danger.pf-m-secondary:active--pf-c-button--after--BorderColor
#c9190b
.pf-c-button.pf-m-danger.pf-m-link--pf-c-button--m-danger--Color
#c9190b
.pf-c-button.pf-m-danger.pf-m-link--pf-c-button--m-danger--BackgroundColor
transparent
.pf-c-button.pf-m-danger.pf-m-link:hover--pf-c-button--m-link--m-danger--Color
#a30000
.pf-c-button.pf-m-danger.pf-m-link:hover--pf-c-button--m-link--m-danger--BackgroundColor
transparent
.pf-c-button.pf-m-danger.pf-m-link:focus--pf-c-button--m-link--m-danger--Color
#a30000
.pf-c-button.pf-m-danger.pf-m-link:focus--pf-c-button--m-link--m-danger--BackgroundColor
transparent
.pf-c-button.pf-m-danger.pf-m-link:active--pf-c-button--m-link--m-danger--Color
#a30000
.pf-c-button.pf-m-danger.pf-m-link:active--pf-c-button--m-link--m-danger--BackgroundColor
transparent
.pf-c-button.pf-m-warning:hover--pf-c-button--m-warning--Color
#151515
.pf-c-button.pf-m-warning:hover--pf-c-button--m-warning--BackgroundColor
#c58c00
.pf-c-button.pf-m-warning:focus--pf-c-button--m-warning--Color
#151515
.pf-c-button.pf-m-warning:focus--pf-c-button--m-warning--BackgroundColor
#c58c00
.pf-c-button.pf-m-warning:active--pf-c-button--m-warning--Color
#151515
.pf-c-button.pf-m-warning:active--pf-c-button--m-warning--BackgroundColor
#c58c00
.pf-c-button.pf-m-control--pf-c-button--BorderRadius
0
.pf-c-button.pf-m-control--pf-c-button--disabled--BackgroundColor
#f0f0f0
.pf-c-button.pf-m-control--pf-c-button--after--BorderWidth
1px
.pf-c-button.pf-m-control--pf-c-button--after--BorderColor
#f0f0f0 #f0f0f0 #8a8d90 #f0f0f0
.pf-c-button.pf-m-control:hover--pf-c-button--m-control--Color
#151515
.pf-c-button.pf-m-control:hover--pf-c-button--m-control--BackgroundColor
#fff
.pf-c-button.pf-m-control:hover--pf-c-button--m-control--after--BorderBottomColor
#06c
.pf-c-button.pf-m-control:active--pf-c-button--m-control--Color
#151515
.pf-c-button.pf-m-control:active--pf-c-button--m-control--BackgroundColor
#fff
.pf-c-button.pf-m-control:active--pf-c-button--m-control--after--BorderBottomColor
#06c
.pf-c-button.pf-m-control:focus--pf-c-button--m-control--Color
#151515
.pf-c-button.pf-m-control:focus--pf-c-button--m-control--BackgroundColor
#fff
.pf-c-button.pf-m-control:focus--pf-c-button--m-control--after--BorderBottomColor
#06c
.pf-c-button.pf-m-control.pf-m-expanded--pf-c-button--m-control--Color
#151515
.pf-c-button.pf-m-control.pf-m-expanded--pf-c-button--m-control--BackgroundColor
#fff
.pf-c-button.pf-m-control.pf-m-expanded--pf-c-button--m-control--after--BorderBottomColor
#06c
.pf-c-button.pf-m-plain--pf-c-button--disabled--Color
#d2d2d2
.pf-c-button.pf-m-plain--pf-c-button--disabled--BackgroundColor
transparent
.pf-c-button.pf-m-plain:hover--pf-c-button--m-plain--Color
#151515
.pf-c-button.pf-m-plain:hover--pf-c-button--m-plain--BackgroundColor
transparent
.pf-c-button.pf-m-plain:active--pf-c-button--m-plain--Color
#151515
.pf-c-button.pf-m-plain:active--pf-c-button--m-plain--BackgroundColor
transparent
.pf-c-button.pf-m-plain:focus--pf-c-button--m-plain--Color
#151515
.pf-c-button.pf-m-plain:focus--pf-c-button--m-plain--BackgroundColor
transparent
.pf-c-button:disabled .pf-c-badge--pf-c-badge--m-unread--Color
#151515
.pf-c-button:disabled .pf-c-badge--pf-c-badge--m-unread--BackgroundColor
#f0f0f0
.pf-c-button:disabled .pf-c-badge--pf-c-button--m-primary__c-badge--BorderWidth
0
.pf-c-button.pf-m-aria-disabled--pf-c-button--after--BorderWidth
0
.pf-c-button.pf-m-aria-disabled--pf-c-button--m-link--m-inline--hover--TextDecoration
none
.pf-c-button.pf-m-progress--pf-c-button--PaddingRight
calc(1rem + calc(1.125rem + 0.5rem) / 2)
.pf-c-button.pf-m-progress--pf-c-button--PaddingLeft
calc(1rem + calc(1.125rem + 0.5rem) / 2)
.pf-c-button.pf-m-in-progress--pf-c-button--m-link--m-inline--PaddingLeft
calc(0.25rem + 1rem + 0.5rem)
.pf-c-button.pf-m-in-progress:not(.pf-m-plain)--pf-c-button--PaddingRight
1rem
.pf-c-button.pf-m-in-progress:not(.pf-m-plain)--pf-c-button--PaddingLeft
calc(1rem + calc(1.125rem + 0.5rem))
.pf-c-button.pf-m-in-progress.pf-m-plain--pf-c-button--m-plain--Color
#06c
.pf-c-button.pf-m-in-progress.pf-m-plain--pf-c-button__progress--Left
50%
.pf-c-button.pf-m-in-progress.pf-m-plain--pf-c-button__progress--TranslateX
-50%
.pf-c-button__progress .pf-c-spinner--pf-c-spinner--Color
currentcolor
.pf-m-overpass-font .pf-c-button--pf-c-button--FontWeight
700

View source on GitHub