--- id: Button section: components cssPrefix: pf-v6-c-button ---import './Button.css' ## Examples ### Variations ```html





Icon






Icon end




``` ### Clicked buttons ```html





Icon






Icon end




``` ### Small buttons ```html





Icon






Icon end




``` ### Disabled ```html





Icon






Icon end




``` ### Aria-disabled ```html





Icon






Icon end




``` ### 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 ``` ### Types ```html ``` ### Call to action ```html

disabled
``` ### Progress ```html


``` ### Counts ```html
disabled
``` ### Plain with no padding ```html For when a plain/icon button is placed inline with text . ``` ### Stateful ```html Read


Unread


Attention
``` ### 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. ```html ``` ### Settings ```html ``` ### Hamburger ```html ``` ## 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` | `