PF Next

Button

Button Types

Preview

<button class="pf-c-button pf-m-primary">
  Primary
</button>
<button class="pf-c-button pf-m-secondary">
  Secondary
</button>
<button class="pf-c-button pf-m-tertiary">
  Tertiary
</button>
<button class="pf-c-button pf-m-danger">
  Danger
</button>
<button class="pf-c-button pf-m-link">
  <i class="fas fa-plus-circle" aria-hidden="true"></i> Link button
</button>
<button class="pf-c-button pf-m-plain" aria-label="Remove">
  <i class="fas fa-times" aria-hidden="true"></i>
</button>

Button States

Preview

<button class="pf-c-button pf-m-primary">
  Primary
</button>
<button class="pf-c-button pf-m-primary pf-m-focus">
  Primary Focus
</button>
<button class="pf-c-button pf-m-primary pf-m-active">
  Primary Active
</button>
<button class="pf-c-button pf-m-primary pf-m-disabled">
  Primary Disabled
</button>
<button class="pf-c-button pf-m-secondary">
  Secondary
</button>
<button class="pf-c-button pf-m-secondary pf-m-focus">
  Secondary Focus
</button>
<button class="pf-c-button pf-m-secondary pf-m-active">
  Secondary Active
</button>
<button class="pf-c-button pf-m-secondary pf-m-disabled">
  Secondary Disabled
</button>
<button class="pf-c-button pf-m-tertiary">
  Tertiary
</button>
<button class="pf-c-button pf-m-tertiary pf-m-focus">
  Tertiary Focus
</button>
<button class="pf-c-button pf-m-tertiary pf-m-active">
  Tertiary Active
</button>
<button class="pf-c-button pf-m-tertiary pf-m-disabled">
  Tertiary Disabled
</button>
<button class="pf-c-button pf-m-danger">
  Danger
</button>
<button class="pf-c-button pf-m-danger pf-m-focus">
  Danger Focus
</button>
<button class="pf-c-button pf-m-danger pf-m-active">
  Danger Active
</button>
<button class="pf-c-button pf-m-danger pf-m-disabled">
  Danger Disabled
</button>
<button class="pf-c-button pf-m-link">
  <i class="fas fa-plus-circle" aria-hidden="true"></i> Link button
</button>
<button class="pf-c-button pf-m-link pf-m-focus">
  <i class="fas fa-plus-circle" aria-hidden="true"></i> Link button
</button>
<button class="pf-c-button pf-m-link pf-m-active">
  <i class="fas fa-plus-circle" aria-hidden="true"></i> Link button
</button>
<button class="pf-c-button pf-m-link pf-m-disabled">
  <i class="fas fa-plus-circle" aria-hidden="true"></i> Link button
</button>

Links as Buttons

<a class="pf-c-button pf-m-primary" href="https://www.w3.org/TR/WCAG20-TECHS/ARIA8.html#ARIA8-examples">
  Primary Link to W3.org
</a>
<a class="pf-c-button pf-m-secondary" href="#overview" aria-label="Read more about button documentation">
  Secondary Link to Anchor
</a>
<a class="pf-c-button pf-m-tertiary pf-m-disabled" href="https://www.w3.org/TR/WCAG20-TECHS/ARIA8.html#ARIA8-examples" aria-disabled="true" tabindex="-1">
  Tertiary Link to W3.org
</a>

Button (Block Level)

Preview

<button class="pf-c-button pf-m-primary pf-m-block">
  Block level button
</button>

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-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-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.