Button
Buttons communicate and trigger actions a user can take in an application or website. Related design guidelines: Buttons and links
ExamplesDocumentationCSS VariablesExamples
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-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-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="[link description]" | a.pf-c-button | The link text should adequately describe the link's 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" | a.pf-c-button | When a link element is used, indicates that it is unavailable. Required when link 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 | When a link element is used, removes it from keyboard focus. Required when link is disabled |
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-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, has no padding, and is displayed inline with other inline content. |
.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. |
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 | 500 | ||
| .pf-c-button | --pf-c-button--FontSize | 1rem | ||
| .pf-c-button | --pf-c-button--BorderRadius | 3px | ||
| .pf-c-button | --pf-c-button--BorderColor | transparent | ||
| .pf-c-button | --pf-c-button--BorderWidth | 1px | ||
| .pf-c-button | --pf-c-button--hover--BorderWidth | 2px | ||
| .pf-c-button | --pf-c-button--focus--BorderWidth | 2px | ||
| .pf-c-button | --pf-c-button--active--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--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--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--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--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--BorderColor | #06c | ||
| .pf-c-button | --pf-c-button--m-secondary--active--Color | #06c | ||
| .pf-c-button | --pf-c-button--m-tertiary--BackgroundColor | transparent | ||
| .pf-c-button | --pf-c-button--m-tertiary--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--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--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--BorderColor | #151515 | ||
| .pf-c-button | --pf-c-button--m-tertiary--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--hover--TextDecoration | underline | ||
| .pf-c-button | --pf-c-button--m-link--m-inline--hover--Color | #004080 | ||
| .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--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--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-control--disabled--after--BorderTopColor | transparent | ||
| .pf-c-button | --pf-c-button--m-control--disabled--after--BorderRightColor | transparent | ||
| .pf-c-button | --pf-c-button--m-control--disabled--after--BorderBottomColor | transparent | ||
| .pf-c-button | --pf-c-button--m-control--disabled--after--BorderLeftColor | transparent | ||
| .pf-c-button | --pf-c-button--m-control--disabled--BackgroundColor | transparent | ||
| .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:hover::after | --pf-c-button--BorderWidth | 2px | ||
| .pf-c-button:focus::after | --pf-c-button--BorderWidth | 2px | ||
| .pf-c-button:active::after | --pf-c-button--BorderWidth | 2px | ||
| .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::after | --pf-c-button--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::after | --pf-c-button--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::after | --pf-c-button--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::after | --pf-c-button--BorderColor | #06c | ||
| .pf-c-button.pf-m-tertiary::after | --pf-c-button--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::after | --pf-c-button--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::after | --pf-c-button--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::after | --pf-c-button--BorderColor | #151515 | ||
| .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-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:hover | --pf-c-button--m-link--Color | #004080 | ||
| .pf-c-button.pf-m-control | --pf-c-button--disabled--BackgroundColor | transparent | ||
| .pf-c-button.pf-m-control::after | --pf-c-button--BorderWidth | 1px | ||
| .pf-c-button.pf-m-control::after | --pf-c-button--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::after | --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::after | --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::after | --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::after | --pf-c-button--m-control--after--BorderBottomColor | #06c | ||
| .pf-c-button.pf-m-control:disabled::after | --pf-c-button--m-control--after--BorderTopColor | transparent | ||
| .pf-c-button.pf-m-control:disabled::after | --pf-c-button--m-control--after--BorderRightColor | transparent | ||
| .pf-c-button.pf-m-control:disabled::after | --pf-c-button--m-control--after--BorderBottomColor | transparent | ||
| .pf-c-button.pf-m-control:disabled::after | --pf-c-button--m-control--after--BorderLeftColor | transparent | ||
| .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::after | --pf-c-button--BorderColor | transparent | ||
| .pf-m-redhat-font .pf-c-button | --pf-c-button--FontWeight | 400 | ||
