• Home
• org.mvnpm.at.patternfly
• patternfly
• 6.0.0
• source code
• Button.md

×

Project download

Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $

You can buy this project and download/modify it how often you want.

package.docs.components.Button.examples.Button.md Maven / Gradle / Ivy

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

## Examples

### Variations

```html

  Primary



  Secondary



  Secondary danger



  Tertiary



  Danger



  Warning








  Link



  Link danger



  Inline link



  
    
  








  Control



  
    
  








  Icon


  
    
  
  Primary



  
    
  
  Secondary



  
    
  
  Secondary danger



  
    
  
  Tertiary



  
    
  
  Danger



  
    
  
  Warning








  
    
  
  Link



  
    
  
  Link danger



  
    
  
  Inline link



  
    
  








  
    
  
  Control



  
    
  








  Icon end


  Primary
  
    
  



  Secondary
  
    
  



  Secondary danger
  
    
  



  Tertiary
  
    
  



  Danger
  
    
  



  Warning
  
    
  








  Link
  
    
  



  Link danger
  
    
  



  Inline link
  
    
  



  
    
  








  Control
  
    
  



  
    
  


```

### Clicked buttons

```html

  Primary



  Secondary



  Secondary danger



  Tertiary



  Danger



  Warning








  Link



  Link danger



  Inline link



  
    
  








  Control



  
    
  








  Icon


  
    
  
  Primary



  
    
  
  Secondary



  
    
  
  Secondary danger



  
    
  
  Tertiary



  
    
  
  Danger



  
    
  
  Warning








  
    
  
  Link



  
    
  
  Link danger



  
    
  
  Inline link



  
    
  








  
    
  
  Control



  
    
  








  Icon end


  Primary
  
    
  



  Secondary
  
    
  



  Secondary danger
  
    
  



  Tertiary
  
    
  



  Danger
  
    
  



  Warning
  
    
  








  Link
  
    
  



  Link danger
  
    
  



  Inline link
  
    
  



  
    
  








  Control
  
    
  



  
    
  


```

### Small buttons

```html

  Primary



  Secondary



  Secondary danger



  Tertiary



  Danger



  Warning








  Link



  Link danger



  Inline link



  
    
  








  Control



  
    
  








  Icon


  
    
  
  Primary



  
    
  
  Secondary



  
    
  
  Secondary danger



  
    
  
  Tertiary



  
    
  
  Danger



  
    
  
  Warning








  
    
  
  Link



  
    
  
  Link danger



  
    
  
  Inline link



  
    
  








  
    
  
  Control



  
    
  








  Icon end


  Primary
  
    
  



  Secondary
  
    
  



  Secondary danger
  
    
  



  Tertiary
  
    
  



  Danger
  
    
  



  Warning
  
    
  








  Link
  
    
  



  Link danger
  
    
  



  Inline link
  
    
  



  
    
  








  Control
  
    
  



  
    
  


```

### Disabled

```html

  Primary



  Secondary



  Secondary danger



  Tertiary



  Danger



  Warning








  Link



  Link danger



  Inline link



  
    
  








  Control



  
    
  








  Icon


  
    
  
  Primary



  
    
  
  Secondary



  
    
  
  Secondary danger



  
    
  
  Tertiary



  
    
  
  Danger



  
    
  
  Warning








  
    
  
  Link



  
    
  
  Link danger



  
    
  
  Inline link



  
    
  








  
    
  
  Control



  
    
  








  Icon end


  Primary
  
    
  



  Secondary
  
    
  



  Secondary danger
  
    
  



  Tertiary
  
    
  



  Danger
  
    
  



  Warning
  
    
  








  Link
  
    
  



  Link danger
  
    
  



  Inline link
  
    
  



  
    
  








  Control
  
    
  



  
    
  


```

### Aria-disabled

```html

  Primary



  Secondary



  Secondary danger



  Tertiary



  Danger



  Warning








  Link



  Link danger



  Inline link



  
    
  








  Control



  
    
  








  Icon


  
    
  
  Primary



  
    
  
  Secondary



  
    
  
  Secondary danger



  
    
  
  Tertiary



  
    
  
  Danger



  
    
  
  Warning








  
    
  
  Link



  
    
  
  Link danger



  
    
  
  Inline link



  
    
  








  
    
  
  Control



  
    
  








  Icon end


  Primary
  
    
  



  Secondary
  
    
  



  Secondary danger
  
    
  



  Tertiary
  
    
  



  Danger
  
    
  



  Warning
  
    
  








  Link
  
    
  



  Link danger
  
    
  



  Inline link
  
    
  



  
    
  








  Control
  
    
  



  
    
  


```

### Links as buttons

```html

  Primary link to W3.org



  Secondary link to anchor



  Secondary danger link to anchor



  Tertiary link to W3.org



  Link to W3.org



  Link danger to W3.org


```

### Inline link as span

```html
Plain



  
    
  





Plain no padding



  
    
  





Inline link

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  This is long button text that needs to be a span so that it will wrap inline with the text around it.

Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum velit elementum non.

```

### Block level

```html

  Block level button


```

### Types

```html

  Submit



  Reset



  Default


```

### Call to action

```html

  Call to action



  Call to action



  Call to action



  Call to action
  
    
  



  Call to action
  
    
  





disabled



  Call to action



  Call to action



  Call to action



  Call to action
  
    
  



  Call to action
  
    
  


```

### Progress

```html

  Primary loader



  
    
  

  Primary loading




  Secondary loader



  
    
  

  Secondary loading




  
    
  



  
    
  

  
    
  




  Inline loader



  
    
  

  Inline loading


```

### Counts

```html

  View issues
  
    
      7
      unread messages
    
  


  View issues
  
    7
  


  View issues
  
    
      7
      unread messages
    
  


  View issues
  
    7
  



disabled



  View issues
  
    7
  


  View issues
  
    7
  


  View issues
  
    7
  


  View issues
  
    7
  


```

### Plain with no padding

```html
For when a plain/icon button is placed inline with text

  
    
  

.

```

### Stateful

```html
Read



  
    
  
  
    10
    items
  



  
    
  
  
    10
    items
  







Unread



  
    
  
  
    10
    unread items
  



  
    
  
  
    10
    unread items
  







Attention



  
    
  
  
    10
    unread items, needs attention
  



  
    
  
  
    10
    unread items, needs attention
  


```

## 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` | `, ` |  Initiates a button. Always use it with a modifier class. **Required** |
| `.pf-v6-c-button__icon` | `` | Initiates a button icon. |
| `.pf-v6-c-button__progress` | `` | Initiates a button progress container. |
| `.pf-v6-c-button__count` | `` | 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 ``, 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 so that it has small font size. |
| `.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`. |