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

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

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

Red Hat logo
Copyright © 2022 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines