@patternfly/patternfly/docs/components/Button/examples/Button.md

Assets, source, tooling, and content for PatternFly 4

---
id: Button
section: components
cssPrefix: pf-v6-c-button
---import './Button.css'

## Examples

### Variations

```html
<button class="pf-v6-c-button pf-m-primary" type="button">
  <span class="pf-v6-c-button__text">Primary</span>
</button>

<button class="pf-v6-c-button pf-m-secondary" type="button">
  <span class="pf-v6-c-button__text">Secondary</span>
</button>

<button class="pf-v6-c-button pf-m-danger pf-m-secondary" type="button">
  <span class="pf-v6-c-button__text">Secondary danger</span>
</button>

<button class="pf-v6-c-button pf-m-tertiary" type="button">
  <span class="pf-v6-c-button__text">Tertiary</span>
</button>

<button class="pf-v6-c-button pf-m-danger" type="button">
  <span class="pf-v6-c-button__text">Danger</span>
</button>

<button class="pf-v6-c-button pf-m-warning" type="button">
  <span class="pf-v6-c-button__text">Warning</span>
</button>

<br />
<br />

<button class="pf-v6-c-button pf-m-link" type="button">
  <span class="pf-v6-c-button__text">Link</span>
</button>

<button class="pf-v6-c-button pf-m-link pf-m-danger" type="button">
  <span class="pf-v6-c-button__text">Link danger</span>
</button>

<button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
  <span class="pf-v6-c-button__text">Inline link</span>
</button>

<button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Remove">
  <span class="pf-v6-c-button__icon">
    <i class="fas fa-times" aria-hidden="true"></i>
  </span>
</button>

<br />
<br />

<button class="pf-v6-c-button pf-m-control" type="button">
  <span class="pf-v6-c-button__text">Control</span>
</button>

<button
  class="pf-v6-c-button pf-m-control"
  type="button"
  aria-label="Copy input"
>
  <span class="pf-v6-c-button__icon">
    <i class="fas fa-copy" aria-hidden="true"></i>
  </span>
</button>

<br />
<br />

<div>
  <strong>Icon</strong>
</div>
<button class="pf-v6-c-button pf-m-primary" type="button">
  <span class="pf-v6-c-button__icon pf-m-start">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-button__text">Primary</span>
</button>

<button class="pf-v6-c-button pf-m-secondary" type="button">
  <span class="pf-v6-c-button__icon pf-m-start">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-button__text">Secondary</span>
</button>

<button class="pf-v6-c-button pf-m-danger pf-m-secondary" type="button">
  <span class="pf-v6-c-button__icon pf-m-start">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-button__text">Secondary danger</span>
</button>

<button class="pf-v6-c-button pf-m-tertiary" type="button">
  <span class="pf-v6-c-button__icon pf-m-start">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-button__text">Tertiary</span>
</button>

<button class="pf-v6-c-button pf-m-danger" type="button">
  <span class="pf-v6-c-button__icon pf-m-start">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-button__text">Danger</span>
</button>

<button class="pf-v6-c-button pf-m-warning" type="button">
  <span class="pf-v6-c-button__icon pf-m-start">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-button__text">Warning</span>
</button>

<br />
<br />

<button class="pf-v6-c-button pf-m-link" type="button">
  <span class="pf-v6-c-button__icon pf-m-start">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-button__text">Link</span>
</button>

<button class="pf-v6-c-button pf-m-link pf-m-danger" type="button">
  <span class="pf-v6-c-button__icon pf-m-start">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-button__text">Link danger</span>
</button>

<button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
  <span class="pf-v6-c-button__icon pf-m-start">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-button__text">Inline link</span>
</button>

<button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Remove">
  <span class="pf-v6-c-button__icon">
    <i class="fas fa-times" aria-hidden="true"></i>
  </span>
</button>

<br />
<br />

<button class="pf-v6-c-button pf-m-control" type="button">
  <span class="pf-v6-c-button__icon pf-m-start">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-button__text">Control</span>
</button>

<button
  class="pf-v6-c-button pf-m-control"
  type="button"
  aria-label="Copy input"
>
  <span class="pf-v6-c-button__icon">
    <i class="fas fa-copy" aria-hidden="true"></i>
  </span>
</button>

<br />
<br />

<div>
  <strong>Icon end</strong>
</div>
<button class="pf-v6-c-button pf-m-primary" type="button">
  <span class="pf-v6-c-button__text">Primary</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</button>

<button class="pf-v6-c-button pf-m-secondary" type="button">
  <span class="pf-v6-c-button__text">Secondary</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</button>

<button class="pf-v6-c-button pf-m-danger pf-m-secondary" type="button">
  <span class="pf-v6-c-button__text">Secondary danger</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</button>

<button class="pf-v6-c-button pf-m-tertiary" type="button">
  <span class="pf-v6-c-button__text">Tertiary</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</button>

<button class="pf-v6-c-button pf-m-danger" type="button">
  <span class="pf-v6-c-button__text">Danger</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</button>

<button class="pf-v6-c-button pf-m-warning" type="button">
  <span class="pf-v6-c-button__text">Warning</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</button>

<br />
<br />

<button class="pf-v6-c-button pf-m-link" type="button">
  <span class="pf-v6-c-button__text">Link</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</button>

<button class="pf-v6-c-button pf-m-link pf-m-danger" type="button">
  <span class="pf-v6-c-button__text">Link danger</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</button>

<button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
  <span class="pf-v6-c-button__text">Inline link</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</button>

<button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Remove">
  <span class="pf-v6-c-button__icon">
    <i class="fas fa-times" aria-hidden="true"></i>
  </span>
</button>

<br />
<br />

<button class="pf-v6-c-button pf-m-control" type="button">
  <span class="pf-v6-c-button__text">Control</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</button>

<button
  class="pf-v6-c-button pf-m-control"
  type="button"
  aria-label="Copy input"
>
  <span class="pf-v6-c-button__icon">
    <i class="fas fa-copy" aria-hidden="true"></i>
  </span>
</button>

```

### Clicked buttons

```html
<button class="pf-v6-c-button pf-m-clicked pf-m-primary" type="button">
  <span class="pf-v6-c-button__text">Primary</span>
</button>

<button class="pf-v6-c-button pf-m-clicked pf-m-secondary" type="button">
  <span class="pf-v6-c-button__text">Secondary</span>
</button>

<button
  class="pf-v6-c-button pf-m-clicked pf-m-danger pf-m-secondary"
  type="button"
>
  <span class="pf-v6-c-button__text">Secondary danger</span>
</button>

<button class="pf-v6-c-button pf-m-clicked pf-m-tertiary" type="button">
  <span class="pf-v6-c-button__text">Tertiary</span>
</button>

<button class="pf-v6-c-button pf-m-clicked pf-m-danger" type="button">
  <span class="pf-v6-c-button__text">Danger</span>
</button>

<button class="pf-v6-c-button pf-m-clicked pf-m-warning" type="button">
  <span class="pf-v6-c-button__text">Warning</span>
</button>

<br />
<br />

<button class="pf-v6-c-button pf-m-clicked pf-m-link" type="button">
  <span class="pf-v6-c-button__text">Link</span>
</button>

<button class="pf-v6-c-button pf-m-clicked pf-m-link pf-m-danger" type="button">
  <span class="pf-v6-c-button__text">Link danger</span>
</button>

<button class="pf-v6-c-button pf-m-clicked pf-m-inline pf-m-link" type="button">
  <span class="pf-v6-c-button__text">Inline link</span>
</button>

<button
  class="pf-v6-c-button pf-m-clicked pf-m-plain"
  type="button"
  aria-label="Remove"
>
  <span class="pf-v6-c-button__icon">
    <i class="fas fa-times" aria-hidden="true"></i>
  </span>
</button>

<br />
<br />

<button class="pf-v6-c-button pf-m-clicked pf-m-control" type="button">
  <span class="pf-v6-c-button__text">Control</span>
</button>

<button
  class="pf-v6-c-button pf-m-clicked pf-m-control"
  type="button"
  aria-label="Copy input"
>
  <span class="pf-v6-c-button__icon">
    <i class="fas fa-copy" aria-hidden="true"></i>
  </span>
</button>

<br />
<br />

<div>
  <strong>Icon</strong>
</div>
<button class="pf-v6-c-button pf-m-clicked pf-m-primary" type="button">
  <span class="pf-v6-c-button__icon pf-m-start">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-button__text">Primary</span>
</button>

<button class="pf-v6-c-button pf-m-clicked pf-m-secondary" type="button">
  <span class="pf-v6-c-button__icon pf-m-start">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-button__text">Secondary</span>
</button>

<button
  class="pf-v6-c-button pf-m-clicked pf-m-danger pf-m-secondary"
  type="button"
>
  <span class="pf-v6-c-button__icon pf-m-start">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-button__text">Secondary danger</span>
</button>

<button class="pf-v6-c-button pf-m-clicked pf-m-tertiary" type="button">
  <span class="pf-v6-c-button__icon pf-m-start">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-button__text">Tertiary</span>
</button>

<button class="pf-v6-c-button pf-m-clicked pf-m-danger" type="button">
  <span class="pf-v6-c-button__icon pf-m-start">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-button__text">Danger</span>
</button>

<button class="pf-v6-c-button pf-m-clicked pf-m-warning" type="button">
  <span class="pf-v6-c-button__icon pf-m-start">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-button__text">Warning</span>
</button>

<br />
<br />

<button class="pf-v6-c-button pf-m-clicked pf-m-link" type="button">
  <span class="pf-v6-c-button__icon pf-m-start">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-button__text">Link</span>
</button>

<button class="pf-v6-c-button pf-m-clicked pf-m-link pf-m-danger" type="button">
  <span class="pf-v6-c-button__icon pf-m-start">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-button__text">Link danger</span>
</button>

<button class="pf-v6-c-button pf-m-clicked pf-m-inline pf-m-link" type="button">
  <span class="pf-v6-c-button__icon pf-m-start">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-button__text">Inline link</span>
</button>

<button
  class="pf-v6-c-button pf-m-clicked pf-m-plain"
  type="button"
  aria-label="Remove"
>
  <span class="pf-v6-c-button__icon">
    <i class="fas fa-times" aria-hidden="true"></i>
  </span>
</button>

<br />
<br />

<button class="pf-v6-c-button pf-m-clicked pf-m-control" type="button">
  <span class="pf-v6-c-button__icon pf-m-start">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-button__text">Control</span>
</button>

<button
  class="pf-v6-c-button pf-m-clicked pf-m-control"
  type="button"
  aria-label="Copy input"
>
  <span class="pf-v6-c-button__icon">
    <i class="fas fa-copy" aria-hidden="true"></i>
  </span>
</button>

<br />
<br />

<div>
  <strong>Icon end</strong>
</div>
<button class="pf-v6-c-button pf-m-clicked pf-m-primary" type="button">
  <span class="pf-v6-c-button__text">Primary</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</button>

<button class="pf-v6-c-button pf-m-clicked pf-m-secondary" type="button">
  <span class="pf-v6-c-button__text">Secondary</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</button>

<button
  class="pf-v6-c-button pf-m-clicked pf-m-danger pf-m-secondary"
  type="button"
>
  <span class="pf-v6-c-button__text">Secondary danger</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</button>

<button class="pf-v6-c-button pf-m-clicked pf-m-tertiary" type="button">
  <span class="pf-v6-c-button__text">Tertiary</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</button>

<button class="pf-v6-c-button pf-m-clicked pf-m-danger" type="button">
  <span class="pf-v6-c-button__text">Danger</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</button>

<button class="pf-v6-c-button pf-m-clicked pf-m-warning" type="button">
  <span class="pf-v6-c-button__text">Warning</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</button>

<br />
<br />

<button class="pf-v6-c-button pf-m-clicked pf-m-link" type="button">
  <span class="pf-v6-c-button__text">Link</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</button>

<button class="pf-v6-c-button pf-m-clicked pf-m-link pf-m-danger" type="button">
  <span class="pf-v6-c-button__text">Link danger</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</button>

<button class="pf-v6-c-button pf-m-clicked pf-m-inline pf-m-link" type="button">
  <span class="pf-v6-c-button__text">Inline link</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</button>

<button
  class="pf-v6-c-button pf-m-clicked pf-m-plain"
  type="button"
  aria-label="Remove"
>
  <span class="pf-v6-c-button__icon">
    <i class="fas fa-times" aria-hidden="true"></i>
  </span>
</button>

<br />
<br />

<button class="pf-v6-c-button pf-m-clicked pf-m-control" type="button">
  <span class="pf-v6-c-button__text">Control</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</button>

<button
  class="pf-v6-c-button pf-m-clicked pf-m-control"
  type="button"
  aria-label="Copy input"
>
  <span class="pf-v6-c-button__icon">
    <i class="fas fa-copy" aria-hidden="true"></i>
  </span>
</button>

```

### Small buttons

```html
<button class="pf-v6-c-button pf-m-small pf-m-primary" type="button">
  <span class="pf-v6-c-button__text">Primary</span>
</button>

<button class="pf-v6-c-button pf-m-small pf-m-secondary" type="button">
  <span class="pf-v6-c-button__text">Secondary</span>
</button>

<button
  class="pf-v6-c-button pf-m-small pf-m-danger pf-m-secondary"
  type="button"
>
  <span class="pf-v6-c-button__text">Secondary danger</span>
</button>

<button class="pf-v6-c-button pf-m-small pf-m-tertiary" type="button">
  <span class="pf-v6-c-button__text">Tertiary</span>
</button>

<button class="pf-v6-c-button pf-m-small pf-m-danger" type="button">
  <span class="pf-v6-c-button__text">Danger</span>
</button>

<button class="pf-v6-c-button pf-m-small pf-m-warning" type="button">
  <span class="pf-v6-c-button__text">Warning</span>
</button>

<br />
<br />

<button class="pf-v6-c-button pf-m-small pf-m-link" type="button">
  <span class="pf-v6-c-button__text">Link</span>
</button>

<button class="pf-v6-c-button pf-m-small pf-m-link pf-m-danger" type="button">
  <span class="pf-v6-c-button__text">Link danger</span>
</button>

<button class="pf-v6-c-button pf-m-small pf-m-inline pf-m-link" type="button">
  <span class="pf-v6-c-button__text">Inline link</span>
</button>

<button
  class="pf-v6-c-button pf-m-small pf-m-plain"
  type="button"
  aria-label="Remove"
>
  <span class="pf-v6-c-button__icon">
    <i class="fas fa-times" aria-hidden="true"></i>
  </span>
</button>

<br />
<br />

<button class="pf-v6-c-button pf-m-small pf-m-control" type="button">
  <span class="pf-v6-c-button__text">Control</span>
</button>

<button
  class="pf-v6-c-button pf-m-small pf-m-control"
  type="button"
  aria-label="Copy input"
>
  <span class="pf-v6-c-button__icon">
    <i class="fas fa-copy" aria-hidden="true"></i>
  </span>
</button>

<br />
<br />

<div>
  <strong>Icon</strong>
</div>
<button class="pf-v6-c-button pf-m-small pf-m-primary" type="button">
  <span class="pf-v6-c-button__icon pf-m-start">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-button__text">Primary</span>
</button>

<button class="pf-v6-c-button pf-m-small pf-m-secondary" type="button">
  <span class="pf-v6-c-button__icon pf-m-start">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-button__text">Secondary</span>
</button>

<button
  class="pf-v6-c-button pf-m-small pf-m-danger pf-m-secondary"
  type="button"
>
  <span class="pf-v6-c-button__icon pf-m-start">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-button__text">Secondary danger</span>
</button>

<button class="pf-v6-c-button pf-m-small pf-m-tertiary" type="button">
  <span class="pf-v6-c-button__icon pf-m-start">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-button__text">Tertiary</span>
</button>

<button class="pf-v6-c-button pf-m-small pf-m-danger" type="button">
  <span class="pf-v6-c-button__icon pf-m-start">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-button__text">Danger</span>
</button>

<button class="pf-v6-c-button pf-m-small pf-m-warning" type="button">
  <span class="pf-v6-c-button__icon pf-m-start">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-button__text">Warning</span>
</button>

<br />
<br />

<button class="pf-v6-c-button pf-m-small pf-m-link" type="button">
  <span class="pf-v6-c-button__icon pf-m-start">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-button__text">Link</span>
</button>

<button class="pf-v6-c-button pf-m-small pf-m-link pf-m-danger" type="button">
  <span class="pf-v6-c-button__icon pf-m-start">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-button__text">Link danger</span>
</button>

<button class="pf-v6-c-button pf-m-small pf-m-inline pf-m-link" type="button">
  <span class="pf-v6-c-button__icon pf-m-start">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-button__text">Inline link</span>
</button>

<button
  class="pf-v6-c-button pf-m-small pf-m-plain"
  type="button"
  aria-label="Remove"
>
  <span class="pf-v6-c-button__icon">
    <i class="fas fa-times" aria-hidden="true"></i>
  </span>
</button>

<br />
<br />

<button class="pf-v6-c-button pf-m-small pf-m-control" type="button">
  <span class="pf-v6-c-button__icon pf-m-start">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-button__text">Control</span>
</button>

<button
  class="pf-v6-c-button pf-m-small pf-m-control"
  type="button"
  aria-label="Copy input"
>
  <span class="pf-v6-c-button__icon">
    <i class="fas fa-copy" aria-hidden="true"></i>
  </span>
</button>

<br />
<br />

<div>
  <strong>Icon end</strong>
</div>
<button class="pf-v6-c-button pf-m-small pf-m-primary" type="button">
  <span class="pf-v6-c-button__text">Primary</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</button>

<button class="pf-v6-c-button pf-m-small pf-m-secondary" type="button">
  <span class="pf-v6-c-button__text">Secondary</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</button>

<button
  class="pf-v6-c-button pf-m-small pf-m-danger pf-m-secondary"
  type="button"
>
  <span class="pf-v6-c-button__text">Secondary danger</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</button>

<button class="pf-v6-c-button pf-m-small pf-m-tertiary" type="button">
  <span class="pf-v6-c-button__text">Tertiary</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</button>

<button class="pf-v6-c-button pf-m-small pf-m-danger" type="button">
  <span class="pf-v6-c-button__text">Danger</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</button>

<button class="pf-v6-c-button pf-m-small pf-m-warning" type="button">
  <span class="pf-v6-c-button__text">Warning</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</button>

<br />
<br />

<button class="pf-v6-c-button pf-m-small pf-m-link" type="button">
  <span class="pf-v6-c-button__text">Link</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</button>

<button class="pf-v6-c-button pf-m-small pf-m-link pf-m-danger" type="button">
  <span class="pf-v6-c-button__text">Link danger</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</button>

<button class="pf-v6-c-button pf-m-small pf-m-inline pf-m-link" type="button">
  <span class="pf-v6-c-button__text">Inline link</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</button>

<button
  class="pf-v6-c-button pf-m-small pf-m-plain"
  type="button"
  aria-label="Remove"
>
  <span class="pf-v6-c-button__icon">
    <i class="fas fa-times" aria-hidden="true"></i>
  </span>
</button>

<br />
<br />

<button class="pf-v6-c-button pf-m-small pf-m-control" type="button">
  <span class="pf-v6-c-button__text">Control</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</button>

<button
  class="pf-v6-c-button pf-m-small pf-m-control"
  type="button"
  aria-label="Copy input"
>
  <span class="pf-v6-c-button__icon">
    <i class="fas fa-copy" aria-hidden="true"></i>
  </span>
</button>

```

### Disabled

```html
<button class="pf-v6-c-button pf-m-primary" type="button" disabled>
  <span class="pf-v6-c-button__text">Primary</span>
</button>

<button class="pf-v6-c-button pf-m-secondary" type="button" disabled>
  <span class="pf-v6-c-button__text">Secondary</span>
</button>

<button
  class="pf-v6-c-button pf-m-danger pf-m-secondary"
  type="button"
  disabled
>
  <span class="pf-v6-c-button__text">Secondary danger</span>
</button>

<button class="pf-v6-c-button pf-m-tertiary" type="button" disabled>
  <span class="pf-v6-c-button__text">Tertiary</span>
</button>

<button class="pf-v6-c-button pf-m-danger" type="button" disabled>
  <span class="pf-v6-c-button__text">Danger</span>
</button>

<button class="pf-v6-c-button pf-m-warning" type="button" disabled>
  <span class="pf-v6-c-button__text">Warning</span>
</button>

<br />
<br />

<button class="pf-v6-c-button pf-m-link" type="button" disabled>
  <span class="pf-v6-c-button__text">Link</span>
</button>

<button class="pf-v6-c-button pf-m-link pf-m-danger" type="button" disabled>
  <span class="pf-v6-c-button__text">Link danger</span>
</button>

<button class="pf-v6-c-button pf-m-inline pf-m-link" type="button" disabled>
  <span class="pf-v6-c-button__text">Inline link</span>
</button>

<button
  class="pf-v6-c-button pf-m-plain"
  type="button"
  aria-label="Remove"
  disabled
>
  <span class="pf-v6-c-button__icon">
    <i class="fas fa-times" aria-hidden="true"></i>
  </span>
</button>

<br />
<br />

<button class="pf-v6-c-button pf-m-control" type="button" disabled>
  <span class="pf-v6-c-button__text">Control</span>
</button>

<button
  class="pf-v6-c-button pf-m-control"
  type="button"
  aria-label="Copy input"
  disabled
>
  <span class="pf-v6-c-button__icon">
    <i class="fas fa-copy" aria-hidden="true"></i>
  </span>
</button>

<br />
<br />

<div>
  <strong>Icon</strong>
</div>
<button class="pf-v6-c-button pf-m-primary" type="button" disabled>
  <span class="pf-v6-c-button__icon pf-m-start">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-button__text">Primary</span>
</button>

<button class="pf-v6-c-button pf-m-secondary" type="button" disabled>
  <span class="pf-v6-c-button__icon pf-m-start">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-button__text">Secondary</span>
</button>

<button
  class="pf-v6-c-button pf-m-danger pf-m-secondary"
  type="button"
  disabled
>
  <span class="pf-v6-c-button__icon pf-m-start">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-button__text">Secondary danger</span>
</button>

<button class="pf-v6-c-button pf-m-tertiary" type="button" disabled>
  <span class="pf-v6-c-button__icon pf-m-start">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-button__text">Tertiary</span>
</button>

<button class="pf-v6-c-button pf-m-danger" type="button" disabled>
  <span class="pf-v6-c-button__icon pf-m-start">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-button__text">Danger</span>
</button>

<button class="pf-v6-c-button pf-m-warning" type="button" disabled>
  <span class="pf-v6-c-button__icon pf-m-start">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-button__text">Warning</span>
</button>

<br />
<br />

<button class="pf-v6-c-button pf-m-link" type="button" disabled>
  <span class="pf-v6-c-button__icon pf-m-start">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-button__text">Link</span>
</button>

<button class="pf-v6-c-button pf-m-link pf-m-danger" type="button" disabled>
  <span class="pf-v6-c-button__icon pf-m-start">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-button__text">Link danger</span>
</button>

<button class="pf-v6-c-button pf-m-inline pf-m-link" type="button" disabled>
  <span class="pf-v6-c-button__icon pf-m-start">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-button__text">Inline link</span>
</button>

<button
  class="pf-v6-c-button pf-m-plain"
  type="button"
  aria-label="Remove"
  disabled
>
  <span class="pf-v6-c-button__icon">
    <i class="fas fa-times" aria-hidden="true"></i>
  </span>
</button>

<br />
<br />

<button class="pf-v6-c-button pf-m-control" type="button" disabled>
  <span class="pf-v6-c-button__icon pf-m-start">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-button__text">Control</span>
</button>

<button
  class="pf-v6-c-button pf-m-control"
  type="button"
  aria-label="Copy input"
  disabled
>
  <span class="pf-v6-c-button__icon">
    <i class="fas fa-copy" aria-hidden="true"></i>
  </span>
</button>

<br />
<br />

<div>
  <strong>Icon end</strong>
</div>
<button class="pf-v6-c-button pf-m-primary" type="button" disabled>
  <span class="pf-v6-c-button__text">Primary</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</button>

<button class="pf-v6-c-button pf-m-secondary" type="button" disabled>
  <span class="pf-v6-c-button__text">Secondary</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</button>

<button
  class="pf-v6-c-button pf-m-danger pf-m-secondary"
  type="button"
  disabled
>
  <span class="pf-v6-c-button__text">Secondary danger</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</button>

<button class="pf-v6-c-button pf-m-tertiary" type="button" disabled>
  <span class="pf-v6-c-button__text">Tertiary</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</button>

<button class="pf-v6-c-button pf-m-danger" type="button" disabled>
  <span class="pf-v6-c-button__text">Danger</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</button>

<button class="pf-v6-c-button pf-m-warning" type="button" disabled>
  <span class="pf-v6-c-button__text">Warning</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</button>

<br />
<br />

<button class="pf-v6-c-button pf-m-link" type="button" disabled>
  <span class="pf-v6-c-button__text">Link</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</button>

<button class="pf-v6-c-button pf-m-link pf-m-danger" type="button" disabled>
  <span class="pf-v6-c-button__text">Link danger</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</button>

<button class="pf-v6-c-button pf-m-inline pf-m-link" type="button" disabled>
  <span class="pf-v6-c-button__text">Inline link</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</button>

<button
  class="pf-v6-c-button pf-m-plain"
  type="button"
  aria-label="Remove"
  disabled
>
  <span class="pf-v6-c-button__icon">
    <i class="fas fa-times" aria-hidden="true"></i>
  </span>
</button>

<br />
<br />

<button class="pf-v6-c-button pf-m-control" type="button" disabled>
  <span class="pf-v6-c-button__text">Control</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</button>

<button
  class="pf-v6-c-button pf-m-control"
  type="button"
  aria-label="Copy input"
  disabled
>
  <span class="pf-v6-c-button__icon">
    <i class="fas fa-copy" aria-hidden="true"></i>
  </span>
</button>

```

### Aria-disabled

```html
<button
  class="pf-v6-c-button pf-m-aria-disabled pf-m-primary"
  type="button"
  aria-disabled="true"
>
  <span class="pf-v6-c-button__text">Primary</span>
</button>

<button
  class="pf-v6-c-button pf-m-aria-disabled pf-m-secondary"
  type="button"
  aria-disabled="true"
>
  <span class="pf-v6-c-button__text">Secondary</span>
</button>

<button
  class="pf-v6-c-button pf-m-aria-disabled pf-m-danger pf-m-secondary"
  type="button"
  aria-disabled="true"
>
  <span class="pf-v6-c-button__text">Secondary danger</span>
</button>

<button
  class="pf-v6-c-button pf-m-aria-disabled pf-m-tertiary"
  type="button"
  aria-disabled="true"
>
  <span class="pf-v6-c-button__text">Tertiary</span>
</button>

<button
  class="pf-v6-c-button pf-m-aria-disabled pf-m-danger"
  type="button"
  aria-disabled="true"
>
  <span class="pf-v6-c-button__text">Danger</span>
</button>

<button
  class="pf-v6-c-button pf-m-aria-disabled pf-m-warning"
  type="button"
  aria-disabled="true"
>
  <span class="pf-v6-c-button__text">Warning</span>
</button>

<br />
<br />

<button
  class="pf-v6-c-button pf-m-aria-disabled pf-m-link"
  type="button"
  aria-disabled="true"
>
  <span class="pf-v6-c-button__text">Link</span>
</button>

<button
  class="pf-v6-c-button pf-m-aria-disabled pf-m-link pf-m-danger"
  type="button"
  aria-disabled="true"
>
  <span class="pf-v6-c-button__text">Link danger</span>
</button>

<button
  class="pf-v6-c-button pf-m-aria-disabled pf-m-inline pf-m-link"
  type="button"
  aria-disabled="true"
>
  <span class="pf-v6-c-button__text">Inline link</span>
</button>

<button
  class="pf-v6-c-button pf-m-aria-disabled pf-m-plain"
  type="button"
  aria-label="Remove"
  aria-disabled="true"
>
  <span class="pf-v6-c-button__icon">
    <i class="fas fa-times" aria-hidden="true"></i>
  </span>
</button>

<br />
<br />

<button
  class="pf-v6-c-button pf-m-aria-disabled pf-m-control"
  type="button"
  aria-disabled="true"
>
  <span class="pf-v6-c-button__text">Control</span>
</button>

<button
  class="pf-v6-c-button pf-m-aria-disabled pf-m-control"
  type="button"
  aria-label="Copy input"
  aria-disabled="true"
>
  <span class="pf-v6-c-button__icon">
    <i class="fas fa-copy" aria-hidden="true"></i>
  </span>
</button>

<br />
<br />

<div>
  <strong>Icon</strong>
</div>
<button
  class="pf-v6-c-button pf-m-aria-disabled pf-m-primary"
  type="button"
  aria-disabled="true"
>
  <span class="pf-v6-c-button__icon pf-m-start">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-button__text">Primary</span>
</button>

<button
  class="pf-v6-c-button pf-m-aria-disabled pf-m-secondary"
  type="button"
  aria-disabled="true"
>
  <span class="pf-v6-c-button__icon pf-m-start">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-button__text">Secondary</span>
</button>

<button
  class="pf-v6-c-button pf-m-aria-disabled pf-m-danger pf-m-secondary"
  type="button"
  aria-disabled="true"
>
  <span class="pf-v6-c-button__icon pf-m-start">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-button__text">Secondary danger</span>
</button>

<button
  class="pf-v6-c-button pf-m-aria-disabled pf-m-tertiary"
  type="button"
  aria-disabled="true"
>
  <span class="pf-v6-c-button__icon pf-m-start">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-button__text">Tertiary</span>
</button>

<button
  class="pf-v6-c-button pf-m-aria-disabled pf-m-danger"
  type="button"
  aria-disabled="true"
>
  <span class="pf-v6-c-button__icon pf-m-start">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-button__text">Danger</span>
</button>

<button
  class="pf-v6-c-button pf-m-aria-disabled pf-m-warning"
  type="button"
  aria-disabled="true"
>
  <span class="pf-v6-c-button__icon pf-m-start">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-button__text">Warning</span>
</button>

<br />
<br />

<button
  class="pf-v6-c-button pf-m-aria-disabled pf-m-link"
  type="button"
  aria-disabled="true"
>
  <span class="pf-v6-c-button__icon pf-m-start">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-button__text">Link</span>
</button>

<button
  class="pf-v6-c-button pf-m-aria-disabled pf-m-link pf-m-danger"
  type="button"
  aria-disabled="true"
>
  <span class="pf-v6-c-button__icon pf-m-start">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-button__text">Link danger</span>
</button>

<button
  class="pf-v6-c-button pf-m-aria-disabled pf-m-inline pf-m-link"
  type="button"
  aria-disabled="true"
>
  <span class="pf-v6-c-button__icon pf-m-start">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-button__text">Inline link</span>
</button>

<button
  class="pf-v6-c-button pf-m-aria-disabled pf-m-plain"
  type="button"
  aria-label="Remove"
  aria-disabled="true"
>
  <span class="pf-v6-c-button__icon">
    <i class="fas fa-times" aria-hidden="true"></i>
  </span>
</button>

<br />
<br />

<button
  class="pf-v6-c-button pf-m-aria-disabled pf-m-control"
  type="button"
  aria-disabled="true"
>
  <span class="pf-v6-c-button__icon pf-m-start">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-button__text">Control</span>
</button>

<button
  class="pf-v6-c-button pf-m-aria-disabled pf-m-control"
  type="button"
  aria-label="Copy input"
  aria-disabled="true"
>
  <span class="pf-v6-c-button__icon">
    <i class="fas fa-copy" aria-hidden="true"></i>
  </span>
</button>

<br />
<br />

<div>
  <strong>Icon end</strong>
</div>
<button
  class="pf-v6-c-button pf-m-aria-disabled pf-m-primary"
  type="button"
  aria-disabled="true"
>
  <span class="pf-v6-c-button__text">Primary</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</button>

<button
  class="pf-v6-c-button pf-m-aria-disabled pf-m-secondary"
  type="button"
  aria-disabled="true"
>
  <span class="pf-v6-c-button__text">Secondary</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</button>

<button
  class="pf-v6-c-button pf-m-aria-disabled pf-m-danger pf-m-secondary"
  type="button"
  aria-disabled="true"
>
  <span class="pf-v6-c-button__text">Secondary danger</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</button>

<button
  class="pf-v6-c-button pf-m-aria-disabled pf-m-tertiary"
  type="button"
  aria-disabled="true"
>
  <span class="pf-v6-c-button__text">Tertiary</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</button>

<button
  class="pf-v6-c-button pf-m-aria-disabled pf-m-danger"
  type="button"
  aria-disabled="true"
>
  <span class="pf-v6-c-button__text">Danger</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</button>

<button
  class="pf-v6-c-button pf-m-aria-disabled pf-m-warning"
  type="button"
  aria-disabled="true"
>
  <span class="pf-v6-c-button__text">Warning</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</button>

<br />
<br />

<button
  class="pf-v6-c-button pf-m-aria-disabled pf-m-link"
  type="button"
  aria-disabled="true"
>
  <span class="pf-v6-c-button__text">Link</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</button>

<button
  class="pf-v6-c-button pf-m-aria-disabled pf-m-link pf-m-danger"
  type="button"
  aria-disabled="true"
>
  <span class="pf-v6-c-button__text">Link danger</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</button>

<button
  class="pf-v6-c-button pf-m-aria-disabled pf-m-inline pf-m-link"
  type="button"
  aria-disabled="true"
>
  <span class="pf-v6-c-button__text">Inline link</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</button>

<button
  class="pf-v6-c-button pf-m-aria-disabled pf-m-plain"
  type="button"
  aria-label="Remove"
  aria-disabled="true"
>
  <span class="pf-v6-c-button__icon">
    <i class="fas fa-times" aria-hidden="true"></i>
  </span>
</button>

<br />
<br />

<button
  class="pf-v6-c-button pf-m-aria-disabled pf-m-control"
  type="button"
  aria-disabled="true"
>
  <span class="pf-v6-c-button__text">Control</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</button>

<button
  class="pf-v6-c-button pf-m-aria-disabled pf-m-control"
  type="button"
  aria-label="Copy input"
  aria-disabled="true"
>
  <span class="pf-v6-c-button__icon">
    <i class="fas fa-copy" aria-hidden="true"></i>
  </span>
</button>

```

### Links as buttons

```html
<a
  class="pf-v6-c-button pf-m-primary"
  href="https://www.w3.org/TR/WCAG20-TECHS/ARIA8.html#ARIA8-examples"
>
  <span class="pf-v6-c-button__text">Primary link to W3.org</span>
</a>

<a
  class="pf-v6-c-button pf-m-secondary"
  aria-label="Read more about button documentation"
  href="#overview"
>
  <span class="pf-v6-c-button__text">Secondary link to anchor</span>
</a>

<a
  class="pf-v6-c-button pf-m-danger pf-m-secondary"
  aria-label="Read more about button documentation"
  href="#overview"
>
  <span class="pf-v6-c-button__text">Secondary danger link to anchor</span>
</a>

<a
  class="pf-v6-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"
>
  <span class="pf-v6-c-button__text">Tertiary link to W3.org</span>
</a>

<a
  class="pf-v6-c-button pf-m-link"
  href="https://www.w3.org/TR/WCAG20-TECHS/ARIA8.html#ARIA8-examples"
>
  <span class="pf-v6-c-button__text">Link to W3.org</span>
</a>

<a
  class="pf-v6-c-button pf-m-link pf-m-danger"
  href="https://www.w3.org/TR/WCAG20-TECHS/ARIA8.html#ARIA8-examples"
>
  <span class="pf-v6-c-button__text">Link danger to W3.org</span>
</a>

```

### Inline link as span

```html
<strong>Plain</strong>
<br />
<span
  class="pf-v6-c-button pf-m-plain"
  type="button"
  role="button"
  tabindex="0"
  aria-label="Remove"
>
  <span class="pf-v6-c-button__icon">
    <i class="fas fa-times" aria-hidden="true"></i>
  </span>
</span>
<br />
<br />
<strong>Plain no padding</strong>
<br />
<span
  class="pf-v6-c-button pf-m-no-padding pf-m-plain"
  type="button"
  role="button"
  tabindex="0"
  aria-label="Remove"
>
  <span class="pf-v6-c-button__icon">
    <i class="fas fa-times" aria-hidden="true"></i>
  </span>
</span>
<br />
<br />
<strong>Inline link</strong>
<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<span
  class="pf-v6-c-button pf-m-inline pf-m-link"
  type="button"
  role="button"
  tabindex="0"
>
  <span
    class="pf-v6-c-button__text"
  >This is long button text that needs to be a span so that it will wrap inline with the text around it.</span>
</span>
Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum velit elementum non.

```

### Block level

```html
<button class="pf-v6-c-button pf-m-block pf-m-primary" type="button">
  <span class="pf-v6-c-button__text">Block level button</span>
</button>

```

### Types

```html
<button class="pf-v6-c-button pf-m-primary" type="submit">
  <span class="pf-v6-c-button__text">Submit</span>
</button>

<button class="pf-v6-c-button pf-m-primary" type="reset">
  <span class="pf-v6-c-button__text">Reset</span>
</button>

<button class="pf-v6-c-button pf-m-primary" type="button">
  <span class="pf-v6-c-button__text">Default</span>
</button>

```

### Call to action

```html
<button class="pf-v6-c-button pf-m-display-lg pf-m-primary" type="button">
  <span class="pf-v6-c-button__text">Call to action</span>
</button>

<button class="pf-v6-c-button pf-m-display-lg pf-m-secondary" type="button">
  <span class="pf-v6-c-button__text">Call to action</span>
</button>

<button class="pf-v6-c-button pf-m-display-lg pf-m-tertiary" type="button">
  <span class="pf-v6-c-button__text">Call to action</span>
</button>

<button class="pf-v6-c-button pf-m-display-lg pf-m-link" type="button">
  <span class="pf-v6-c-button__text">Call to action</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-arrow-right" aria-hidden="true"></i>
  </span>
</button>

<button
  class="pf-v6-c-button pf-m-display-lg pf-m-inline pf-m-link"
  type="button"
>
  <span class="pf-v6-c-button__text">Call to action</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-arrow-right" aria-hidden="true"></i>
  </span>
</button>
<br />
<br />
<strong>disabled</strong>
<br />
<button
  class="pf-v6-c-button pf-m-display-lg pf-m-primary"
  type="button"
  disabled
>
  <span class="pf-v6-c-button__text">Call to action</span>
</button>

<button
  class="pf-v6-c-button pf-m-display-lg pf-m-secondary"
  type="button"
  disabled
>
  <span class="pf-v6-c-button__text">Call to action</span>
</button>

<button
  class="pf-v6-c-button pf-m-display-lg pf-m-tertiary"
  type="button"
  disabled
>
  <span class="pf-v6-c-button__text">Call to action</span>
</button>

<button class="pf-v6-c-button pf-m-display-lg pf-m-link" type="button" disabled>
  <span class="pf-v6-c-button__text">Call to action</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-arrow-right" aria-hidden="true"></i>
  </span>
</button>

<button
  class="pf-v6-c-button pf-m-display-lg pf-m-inline pf-m-link"
  type="button"
  disabled
>
  <span class="pf-v6-c-button__text">Call to action</span>
  <span class="pf-v6-c-button__icon pf-m-end">
    <i class="fas fa-arrow-right" aria-hidden="true"></i>
  </span>
</button>

```

### Progress

```html
<button class="pf-v6-c-button pf-m-progress pf-m-primary" type="button">
  <span class="pf-v6-c-button__text">Primary loader</span>
</button>

<button
  class="pf-v6-c-button pf-m-in-progress pf-m-progress pf-m-primary"
  type="button"
>
  <span class="pf-v6-c-button__progress">
    <svg
      class="pf-v6-c-spinner pf-m-md"
      role="progressbar"
      viewBox="0 0 100 100"
      aria-label="Loading..."
    >
      <circle class="pf-v6-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
    </svg>
  </span>

  <span class="pf-v6-c-button__text">Primary loading</span>
</button>
<br />
<button class="pf-v6-c-button pf-m-progress pf-m-secondary" type="button">
  <span class="pf-v6-c-button__text">Secondary loader</span>
</button>

<button
  class="pf-v6-c-button pf-m-in-progress pf-m-progress pf-m-secondary"
  type="button"
>
  <span class="pf-v6-c-button__progress">
    <svg
      class="pf-v6-c-spinner pf-m-md"
      role="progressbar"
      viewBox="0 0 100 100"
      aria-label="Loading..."
    >
      <circle class="pf-v6-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
    </svg>
  </span>

  <span class="pf-v6-c-button__text">Secondary loading</span>
</button>
<br />
<button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Upload">
  <span class="pf-v6-c-button__icon">
    <i class="fas fa-upload" aria-hidden="true"></i>
  </span>
</button>

<button class="pf-v6-c-button pf-m-in-progress pf-m-plain" type="button">
  <span class="pf-v6-c-button__progress">
    <svg
      class="pf-v6-c-spinner pf-m-md"
      role="progressbar"
      viewBox="0 0 100 100"
      aria-label="Uploading..."
    >
      <circle class="pf-v6-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
    </svg>
  </span>

  <span class="pf-v6-c-button__icon">
    <i class="fas fa-upload" aria-hidden="true"></i>
  </span>
</button>
<br />
<button
  class="pf-v6-c-button pf-m-progress pf-m-inline pf-m-link"
  type="button"
>
  <span class="pf-v6-c-button__text">Inline loader</span>
</button>

<button
  class="pf-v6-c-button pf-m-in-progress pf-m-progress pf-m-inline pf-m-link"
  type="button"
>
  <span class="pf-v6-c-button__progress">
    <svg
      class="pf-v6-c-spinner pf-m-inline"
      role="progressbar"
      viewBox="0 0 100 100"
      aria-label="Loading..."
    >
      <circle class="pf-v6-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
    </svg>
  </span>

  <span class="pf-v6-c-button__text">Inline loading</span>
</button>

```

### Counts

```html
<button class="pf-v6-c-button pf-m-primary" type="button">
  <span class="pf-v6-c-button__text">View issues</span>
  <span class="pf-v6-c-button__count">
    <span class="pf-v6-c-badge pf-m-unread">
      7
      <span class="pf-v6-screen-reader">unread messages</span>
    </span>
  </span>
</button>
<button class="pf-v6-c-button pf-m-primary" type="button">
  <span class="pf-v6-c-button__text">View issues</span>
  <span class="pf-v6-c-button__count">
    <span class="pf-v6-c-badge pf-m-read">7</span>
  </span>
</button>
<button class="pf-v6-c-button pf-m-link" type="button">
  <span class="pf-v6-c-button__text">View issues</span>
  <span class="pf-v6-c-button__count">
    <span class="pf-v6-c-badge pf-m-unread">
      7
      <span class="pf-v6-screen-reader">unread messages</span>
    </span>
  </span>
</button>
<button class="pf-v6-c-button pf-m-link" type="button">
  <span class="pf-v6-c-button__text">View issues</span>
  <span class="pf-v6-c-button__count">
    <span class="pf-v6-c-badge pf-m-read">7</span>
  </span>
</button>
<br />
<strong>disabled</strong>
<br />
<button class="pf-v6-c-button pf-m-primary" type="button" disabled>
  <span class="pf-v6-c-button__text">View issues</span>
  <span class="pf-v6-c-button__count">
    <span class="pf-v6-c-badge pf-m-unread pf-m-disabled">7</span>
  </span>
</button>
<button class="pf-v6-c-button pf-m-primary" type="button" disabled>
  <span class="pf-v6-c-button__text">View issues</span>
  <span class="pf-v6-c-button__count">
    <span class="pf-v6-c-badge pf-m-read pf-m-disabled">7</span>
  </span>
</button>
<button class="pf-v6-c-button pf-m-link" type="button" disabled>
  <span class="pf-v6-c-button__text">View issues</span>
  <span class="pf-v6-c-button__count">
    <span class="pf-v6-c-badge pf-m-unread pf-m-disabled">7</span>
  </span>
</button>
<button class="pf-v6-c-button pf-m-link" ty