- React
- HTML
- HTML demos

import ’./Button.css’

## Examples

### Variations

### Clicked buttons

### Small buttons

### Disabled

### Aria-disabled

### Links as buttons

### Inline link as span

### Block level

### Types

### Call to action

### Progress

### Counts

### Plain with no padding

### Stateful

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

##
CSS variables