HTML

Button

Buttons communicate and trigger actions a user can take in an application or website. Related design guidelines: Buttons and links

ExamplesDocumentationCSS Variables

Examples

Variations





States















Block level

Types

Documentation

Overiew

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="[link description]"a.pf-c-buttonThe link text should adequately describe the link's 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"a.pf-c-buttonWhen a link element is used, indicates that it is unavailable. Required when link is disabled
tabindex="-1"a.pf-c-buttonWhen a link element is used, removes it from keyboard focus. Required when link is disabled

Usage

ClassApplied toOutcome
.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-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, has no padding, and is displayed inline with other inline content.
.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-hover.pf-c-buttonForces 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-buttonForces 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-buttonForces 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__icon--MarginRightc_button__icon_MarginRight
0.25rem
--pf-c-button--active--BorderWidthc_button_active_BorderWidth
2px
--pf-c-button--BorderColorc_button_BorderColor
transparent
--pf-c-button--BorderRadiusc_button_BorderRadius
0
--pf-c-button--BorderWidthc_button_BorderWidth
1px
--pf-c-button--disabled--BackgroundColorc_button_disabled_BackgroundColor
#d2d2d2
--pf-c-button--disabled--BorderColorc_button_disabled_BorderColor
transparent
--pf-c-button--disabled--Colorc_button_disabled_Color
#737679
--pf-c-button--focus--BorderWidthc_button_focus_BorderWidth
2px
--pf-c-button--FontSizec_button_FontSize
1rem
--pf-c-button--FontWeightc_button_FontWeight
400
--pf-c-button--hover--BorderWidthc_button_hover_BorderWidth
2px
--pf-c-button--LineHeightc_button_LineHeight
1.5
--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_BorderBottomWidth
2px
--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_BorderWidth
1px
--pf-c-button--m-control--disabled--after--BorderBottomColorc_button_m_control_disabled_after_BorderBottomColor
#ededed
--pf-c-button--m-control--disabled--BackgroundColorc_button_m_control_disabled_BackgroundColor
transparent
--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_BorderBottomWidth
2px
--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_BorderBottomWidth
2px
--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_BorderBottomWidth
2px
--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--BackgroundColorc_button_m_danger_BackgroundColor
#a30000
--pf-c-button--m-danger--Colorc_button_m_danger_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--active--Colorc_button_m_link_active_Color
#004080
--pf-c-button--m-link--Colorc_button_m_link_Color
#004080
--pf-c-button--m-link--disabled--BackgroundColorc_button_m_link_disabled_BackgroundColor
transparent
--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_TextDecoration
underline
--pf-c-button--m-plain--active--Colorc_button_m_plain_active_Color
#151515
--pf-c-button--m-plain--Colorc_button_m_plain_Color
#d2d2d2
--pf-c-button--m-plain--disabled--BackgroundColorc_button_m_plain_disabled_BackgroundColor
transparent
--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--active--BackgroundColorc_button_m_primary_active_BackgroundColor
#004080
--pf-c-button--m-primary--active--Colorc_button_m_primary_active_Color
#fff
--pf-c-button--m-primary--BackgroundColorc_button_m_primary_BackgroundColor
#004080
--pf-c-button--m-primary--Colorc_button_m_primary_Color
#fff
--pf-c-button--m-primary--focus--BackgroundColorc_button_m_primary_focus_BackgroundColor
#004080
--pf-c-button--m-primary--focus--Colorc_button_m_primary_focus_Color
#fff
--pf-c-button--m-primary--hover--BackgroundColorc_button_m_primary_hover_BackgroundColor
#004080
--pf-c-button--m-primary--hover--Colorc_button_m_primary_hover_Color
#fff
--pf-c-button--m-secondary--active--BackgroundColorc_button_m_secondary_active_BackgroundColor
transparent
--pf-c-button--m-secondary--active--BorderColorc_button_m_secondary_active_BorderColor
#06c
--pf-c-button--m-secondary--active--Colorc_button_m_secondary_active_Color
#06c
--pf-c-button--m-secondary--BackgroundColorc_button_m_secondary_BackgroundColor
transparent
--pf-c-button--m-secondary--BorderColorc_button_m_secondary_BorderColor
#06c
--pf-c-button--m-secondary--Colorc_button_m_secondary_Color
#06c
--pf-c-button--m-secondary--focus--BackgroundColorc_button_m_secondary_focus_BackgroundColor
transparent
--pf-c-button--m-secondary--focus--BorderColorc_button_m_secondary_focus_BorderColor
#06c
--pf-c-button--m-secondary--focus--Colorc_button_m_secondary_focus_Color
#06c
--pf-c-button--m-secondary--hover--BackgroundColorc_button_m_secondary_hover_BackgroundColor
transparent
--pf-c-button--m-secondary--hover--BorderColorc_button_m_secondary_hover_BorderColor
#06c
--pf-c-button--m-secondary--hover--Colorc_button_m_secondary_hover_Color
#06c
--pf-c-button--m-tertiary--active--BackgroundColorc_button_m_tertiary_active_BackgroundColor
transparent
--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--BackgroundColorc_button_m_tertiary_BackgroundColor
transparent
--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--focus--BackgroundColorc_button_m_tertiary_focus_BackgroundColor
transparent
--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_BackgroundColor
transparent
--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
--pf-c-button--PaddingBottomc_button_PaddingBottom
0.375rem
--pf-c-button--PaddingLeftc_button_PaddingLeft
1rem
--pf-c-button--PaddingRightc_button_PaddingRight
1rem
--pf-c-button--PaddingTopc_button_PaddingTop
0.375rem