HTML

Button

ExamplesDocumentationCSS Variables

Examples

Button types

Copied to clipboard

Button states













Copied to clipboard
Copied to clipboard

Button (block level)

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-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_BorderWidth2px
--pf-c-button--FontSizec_button_FontSize1rem
--pf-c-button--FontWeightc_button_FontWeight500
--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#72767b
--pf-c-button--focus--BorderWidthc_button_focus_BorderWidth2px
--pf-c-button--hover--BorderWidthc_button_hover_BorderWidth2px
--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