Patternfly Logo

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

AttributeApplied toOutcome
aria-pressed="true or false".pf-c-buttonIndicates 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-plainProvides 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-inlineThe button component's text should adequately describe its purpose. If it does not, aria-label can provide more detailed interaction information.
disabledbutton.pf-c-buttonWhen 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-buttonWhen 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-disabledWhen a non-button element is used, indicates that it is unavailable. Required when element is disabled
aria-expanded="true".pf-c-button.pf-m-expandedIndicates 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-disabledWhen 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-inlineInserts the span into the tab order of the page so that it is focusable. Required when the element is a span

Usage

ClassApplied toOutcome
.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-m-primary.pf-c-buttonModifies for primary styles.
.pf-m-secondary.pf-c-buttonModifies for secondary styles.
.pf-m-tertiary.pf-c-buttonModifies for tertiary styles.
.pf-m-danger.pf-c-buttonModifies for danger styles.
.pf-m-link.pf-c-buttonModifies 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-buttonModifies 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-linkModifies 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-buttonCreates a block level button.
.pf-m-control.pf-c-buttonModifies 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-controlModifies a control button for the expanded state.
.pf-m-start.pf-c-button__iconApplies right spacing to an icon inside of a button when the icon comes before text.
.pf-m-end.pf-c-button__iconApplies left spacing to an icon inside of a button when the icon comes after text.
.pf-m-active.pf-c-buttonForces 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-buttonModifies the button so that it has small font size.
.pf-m-aria-disabled.pf-c-buttonModifies a button to be visually disabled, yet is still focusable.
.pf-m-display-lg.pf-c-button, pf-c-button.pf-m-linkModifies 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-buttonIndicates that the button supports the progress state.
.pf-m-in-progress.pf-c-buttonIndicates 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--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-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-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--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: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-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-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-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: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-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-button--after--BorderColor
transparent
.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--PaddingRight
1rem
.pf-c-button.pf-m-in-progress--pf-c-button--PaddingLeft
calc(1rem + calc(1.125rem + 0.5rem))
.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