Examples
Favorite
A favorite button should use a plain button with the star icon. Applying .pf-m-favorited to the button initiates a microanimation and indicates that the item is favorited.
Documentation
Overview
Always add a modifier class to add color to the button.
Button vs link
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-v6-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-v6-c-button.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="[descriptive text]" | a.pf-v6-c-button, span.pf-v6-c-button.pf-m-link.pf-m-inline | The button component's text should adequately describe its purpose. If it does not, aria-label can provide more detailed interaction information. |
disabled | button.pf-v6-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 | button.pf-v6-c-button | When 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-v6-c-button.pf-m-disabled, span.pf-v6-c-button.pf-m-link.pf-m-inline.pf-m-disabled | When a non-button element is used, indicates that it is unavailable. Required when element is disabled |
aria-expanded=true | .pf-v6-c-button.pf-m-expanded | Indicates that the expanded content element is visible. Required |
tabindex="-1" | a.pf-v6-c-button.pf-m-disabled, span.pf-v6-c-button.pf-m-link.pf-m-inline.pf-m-disabled | When a non-button element is used, removes it from keyboard focus. Required when element is disabled |
tabindex="0" | span.pf-v6-c-button.pf-m-link.pf-m-inline | Inserts the span into the tab order of the page so that it is focusable. Required when the element is a span |
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-v6-c-button | <button>, <span> | Initiates a button. Always use it with a modifier class. Required |
.pf-v6-c-button__icon | <span> | Initiates a button icon. |
.pf-v6-c-button__progress | <span> | Initiates a button progress container. |
.pf-v6-c-button__count | <span> | Initiates a button count container. Note: Count should only be used on link buttons. |
.pf-m-primary | .pf-v6-c-button | Modifies for primary styles. |
.pf-m-secondary | .pf-v6-c-button | Modifies for secondary styles. |
.pf-m-tertiary | .pf-v6-c-button | Modifies for tertiary styles. |
.pf-m-danger | .pf-v6-c-button | Modifies for danger styles. |
.pf-m-warning | .pf-v6-c-button | Modifies for warning styles. |
.pf-m-link | .pf-v6-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-v6-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, stateful, etc. |
.pf-m-no-padding | .pf-v6-c-button.pf-m-plain | Modifies a plain button to remove padding. This modifier should only be used when the button is inline within a sentence or block of text. Adjacent plain buttons without padding should always have spacing between them. |
.pf-m-inline | .pf-v6-c-button.pf-m-link | Modifies 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-v6-c-button | Creates a block level button. |
.pf-m-control | .pf-v6-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-v6-c-button.pf-m-control | Modifies a control button for the expanded state. |
.pf-m-start | .pf-v6-c-button__icon | Applies right spacing to an icon inside of a button when the icon comes before text. |
.pf-m-end | .pf-v6-c-button__icon | Applies left spacing to an icon inside of a button when the icon comes after text. |
.pf-m-active | .pf-v6-c-button | Forces 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-v6-c-button | Modifies the button for small/compact styles. |
.pf-m-aria-disabled | .pf-v6-c-button | Modifies a button to be visually disabled, yet is still focusable. |
.pf-m-display-lg | .pf-v6-c-button, pf-v6-c-button.pf-m-link | Modifies the button and link button for large display styling. For example, use this modifier to achieve "call to action" styles. |
.pf-m-progress | .pf-v6-c-button | Indicates that the button supports the progress state. Note: Not used with the plain variation. |
.pf-m-in-progress | .pf-v6-c-button | Indicates that the button is in the in progress state. |
.pf-m-stateful | .pf-v6-c-button | Indicates that the button is used for one of read, unread, and attention states. Note: Always use with a modifier of .pf-m-read, .pf-m-unread, or .pf-m-attention. |
.pf-m-notify | .pf-v6-c-button | Indicates that the button should show the user notification of an event. Note: This is intended for use with a bell icon in the notification badge. |
.pf-m-favorite | .pf-v6-c-button.pf-m-plain | Modifies a plain button to be a favorite button. Note: This is intended for use with a star icon. |
.pf-m-favorited | .pf-v6-c-button.pf-m-plain.pf-m-favorite | Modifies a favorite button to indicate that item is favorited. |
.pf-m-settings | .pf-v6-c-button.pf-m-plain | Modifies a plain button to be a settings button. |
.pf-m-hamburger | .pf-v6-c-button.pf-m-plain | Modifies a plain button to be a hamburger button. |
.pf-m-expand | .pf-v6-c-button.pf-m-hamburger | Modifies a hamburger button to indicate that it will expand a menu. |
.pf-m-collapse | .pf-v6-c-button.pf-m-hamburger | Modifies a hamburger button to indicate that it will collapse a menu. |
.pf-m-circle | .pf-v6-c-button | Modifies a button to have a circular shape, instead of only rounded corners or a pill shape. Intended for buttons that contain only an icon. |