HTML

Button

ExamplesDocumentationCSS variables

Examples

Button variations

Copied to clipboard

Button states

Copied to clipboard
Copied to clipboard

Button (block level)

Copied to clipboard

Button types

Copied to clipboard

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-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
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> Applies spacing to an icon inside of the button when the icon is followed by text.
.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-hover .pf-c-button Forces display of the hover state of the button. This state is primarily for demonstration purposes and would not normally be used in lieu of the :hover pseudo-class.
.pf-m-active .pf-c-button Forces display of the active state of the button. This state is primarily for demonstration purposes and would not normally be used in lieu of the :active pseudo-class.
.pf-m-focus .pf-c-button Forces display of the focus state of the button. This state is primarily for demonstration purposes and would not normally be used in lieu of the :focus pseudo-class.

CSS variables

--pf-c-button--BorderColorc_button_BorderColortransparent
--pf-c-button--BorderRadiusc_button_BorderRadius0
--pf-c-button--BorderWidthc_button_BorderWidth1px
--pf-c-button--FontSizec_button_FontSize1rem
--pf-c-button--FontWeightc_button_FontWeight400
--pf-c-button--LineHeightc_button_LineHeight1.5
--pf-c-button--PaddingBottomc_button_PaddingBottom0.375rem
--pf-c-button--PaddingLeftc_button_PaddingLeft1rem
--pf-c-button--PaddingRightc_button_PaddingRight1rem
--pf-c-button--PaddingTopc_button_PaddingTop0.375rem
--pf-c-button__icon--MarginRightc_button__icon_MarginRight0.25rem
--pf-c-button--active--BorderWidthc_button_active_BorderWidth2px
--pf-c-button--disabled--BackgroundColorc_button_disabled_BackgroundColor#d2d2d2
--pf-c-button--disabled--BorderColorc_button_disabled_BorderColortransparent
--pf-c-button--disabled--Colorc_button_disabled_Color#737679
--pf-c-button--focus--BorderWidthc_button_focus_BorderWidth2px
--pf-c-button--hover--BorderWidthc_button_hover_BorderWidth2px
--pf-c-button--m-control--active--after--BorderBottomColorc_button_m_control_active_after_BorderBottomColor#06c
--pf-c-button--m-control--active--after--BorderBottomWidthc_button_m_control_active_after_BorderBottomWidth2px
--pf-c-button--m-control--after--BorderBottomColorc_button_m_control_after_BorderBottomColor#ededed
--pf-c-button--m-control--after--BorderLeftColorc_button_m_control_after_BorderLeftColor#ededed
--pf-c-button--m-control--after--BorderRightColorc_button_m_control_after_BorderRightColor#ededed
--pf-c-button--m-control--after--BorderTopColorc_button_m_control_after_BorderTopColor#ededed
--pf-c-button--m-control--after--BorderWidthc_button_m_control_after_BorderWidth1px
--pf-c-button--m-control--disabled--BackgroundColorc_button_m_control_disabled_BackgroundColortransparent
--pf-c-button--m-control--disabled--after--BorderBottomColorc_button_m_control_disabled_after_BorderBottomColor#ededed
--pf-c-button--m-control--focus--after--BorderBottomColorc_button_m_control_focus_after_BorderBottomColor#06c
--pf-c-button--m-control--focus--after--BorderBottomWidthc_button_m_control_focus_after_BorderBottomWidth2px
--pf-c-button--m-control--hover--after--BorderBottomColorc_button_m_control_hover_after_BorderBottomColor#06c
--pf-c-button--m-control--hover--after--BorderBottomWidthc_button_m_control_hover_after_BorderBottomWidth2px
--pf-c-button--m-control--m-expanded--after--BorderBottomColorc_button_m_control_m_expanded_after_BorderBottomColor#06c
--pf-c-button--m-control--m-expanded--after--BorderBottomWidthc_button_m_control_m_expanded_after_BorderBottomWidth2px
--pf-c-button--m-danger--BackgroundColorc_button_m_danger_BackgroundColor#a30000
--pf-c-button--m-danger--Colorc_button_m_danger_Color#fff
--pf-c-button--m-danger--active--BackgroundColorc_button_m_danger_active_BackgroundColor#a30000
--pf-c-button--m-danger--active--Colorc_button_m_danger_active_Color#fff
--pf-c-button--m-danger--focus--BackgroundColorc_button_m_danger_focus_BackgroundColor#a30000
--pf-c-button--m-danger--focus--Colorc_button_m_danger_focus_Color#fff
--pf-c-button--m-danger--hover--BackgroundColorc_button_m_danger_hover_BackgroundColor#a30000
--pf-c-button--m-danger--hover--Colorc_button_m_danger_hover_Color#fff
--pf-c-button--m-link--Colorc_button_m_link_Color#004080
--pf-c-button--m-link--active--Colorc_button_m_link_active_Color#004080
--pf-c-button--m-link--disabled--BackgroundColorc_button_m_link_disabled_BackgroundColortransparent
--pf-c-button--m-link--focus--Colorc_button_m_link_focus_Color#004080
--pf-c-button--m-link--hover--Colorc_button_m_link_hover_Color#004080
--pf-c-button--m-link--m-inline--hover--Colorc_button_m_link_m_inline_hover_Color#004080
--pf-c-button--m-link--m-inline--hover--TextDecorationc_button_m_link_m_inline_hover_TextDecorationunderline
--pf-c-button--m-plain--Colorc_button_m_plain_Color#d2d2d2
--pf-c-button--m-plain--active--Colorc_button_m_plain_active_Color#151515
--pf-c-button--m-plain--disabled--BackgroundColorc_button_m_plain_disabled_BackgroundColortransparent
--pf-c-button--m-plain--disabled--Colorc_button_m_plain_disabled_Color#d2d2d2
--pf-c-button--m-plain--focus--Colorc_button_m_plain_focus_Color#151515
--pf-c-button--m-plain--hover--Colorc_button_m_plain_hover_Color#151515
--pf-c-button--m-primary--BackgroundColorc_button_m_primary_BackgroundColor#fff
--pf-c-button--m-primary--Colorc_button_m_primary_Color#06c
--pf-c-button--m-primary--active--BackgroundColorc_button_m_primary_active_BackgroundColor#ededed
--pf-c-button--m-primary--active--Colorc_button_m_primary_active_Color#06c
--pf-c-button--m-primary--focus--BackgroundColorc_button_m_primary_focus_BackgroundColor#ededed
--pf-c-button--m-primary--focus--Colorc_button_m_primary_focus_Color#06c
--pf-c-button--m-primary--hover--BackgroundColorc_button_m_primary_hover_BackgroundColor#ededed
--pf-c-button--m-primary--hover--Colorc_button_m_primary_hover_Color#06c
--pf-c-button--m-secondary--BackgroundColorc_button_m_secondary_BackgroundColortransparent
--pf-c-button--m-secondary--BorderColorc_button_m_secondary_BorderColor#fff
--pf-c-button--m-secondary--Colorc_button_m_secondary_Color#fff
--pf-c-button--m-secondary--active--BackgroundColorc_button_m_secondary_active_BackgroundColortransparent
--pf-c-button--m-secondary--active--BorderColorc_button_m_secondary_active_BorderColor#fff
--pf-c-button--m-secondary--active--Colorc_button_m_secondary_active_Color#fff
--pf-c-button--m-secondary--focus--BackgroundColorc_button_m_secondary_focus_BackgroundColortransparent
--pf-c-button--m-secondary--focus--BorderColorc_button_m_secondary_focus_BorderColor#fff
--pf-c-button--m-secondary--focus--Colorc_button_m_secondary_focus_Color#fff
--pf-c-button--m-secondary--hover--BackgroundColorc_button_m_secondary_hover_BackgroundColortransparent
--pf-c-button--m-secondary--hover--BorderColorc_button_m_secondary_hover_BorderColor#fff
--pf-c-button--m-secondary--hover--Colorc_button_m_secondary_hover_Color#fff
--pf-c-button--m-tertiary--BackgroundColorc_button_m_tertiary_BackgroundColortransparent
--pf-c-button--m-tertiary--BorderColorc_button_m_tertiary_BorderColor#151515
--pf-c-button--m-tertiary--Colorc_button_m_tertiary_Color#151515
--pf-c-button--m-tertiary--active--BackgroundColorc_button_m_tertiary_active_BackgroundColortransparent
--pf-c-button--m-tertiary--active--BorderColorc_button_m_tertiary_active_BorderColor#151515
--pf-c-button--m-tertiary--active--Colorc_button_m_tertiary_active_Color#151515
--pf-c-button--m-tertiary--focus--BackgroundColorc_button_m_tertiary_focus_BackgroundColortransparent
--pf-c-button--m-tertiary--focus--BorderColorc_button_m_tertiary_focus_BorderColor#151515
--pf-c-button--m-tertiary--focus--Colorc_button_m_tertiary_focus_Color#151515
--pf-c-button--m-tertiary--hover--BackgroundColorc_button_m_tertiary_hover_BackgroundColortransparent
--pf-c-button--m-tertiary--hover--BorderColorc_button_m_tertiary_hover_BorderColor#151515
--pf-c-button--m-tertiary--hover--Colorc_button_m_tertiary_hover_Color#151515