Skip to content
PatternFly.org Contribute on Github
PatternFly Elements

Button

A button is a box area or text that communicates and triggers user actions when clicked or selected. Buttons can be used to communicate and immediately trigger actions a user can take in an application, like submitting a form, canceling a process, or creating a new object. Buttons can also be used to take a user to a new location, like another page inside of a web application, or an external site such as help or documentation..

Installation

We recommend loading elements via a CDN such as JSPM and using an import map to manage your dependencies.

For more information on import maps and how to use them, see the import map reference on MDN Web Docs.

If you are using node and NPM, you can install this component using npm:

npm install @patternfly/elements

Then import this component into your project by using a bare module specifier:

import '@patternfly/elements/pf-button/pf-button.js'

Please Note: You should either load elements via a CDN or install them locally through NPM. Do not do both.

Overview

Default - Medium size

Primary Secondary Danger Secondary Tertiary Danger Warning

Installation

npm install @patternfly/elements

Usage

Link Link Inline Link Danger Link
View HTML Source 
<pf-button variant="link" id="test">
  <svg fill="currentColor"
       style="vertical-align:-0.125em"
       height="1em"
       width="1em"
       viewBox="0 0 512 512"
       aria-hidden="true">
    <path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"/>
  </svg>
  Link
</pf-button>
<pf-button variant="link" icon-set="patternfly" icon="arrow" icon-position="right">Link</pf-button>
<pf-button variant="link" inline>Inline Link</pf-button>
<pf-button variant="link" danger>Danger Link</pf-button>

Plain button

View HTML Source 
<pf-button plain>
  <svg aria-label="Action" fill="currentColor" height="1em" width="1em" viewBox="0 0 352 512">
    <path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path>
  </svg>
</pf-button>

Control variant

Control

View HTML Source 
<pf-button variant="control">Control</pf-button>
<pf-button variant="control">
  <svg aria-label="Copy" fill="currentColor" height="1em" width="1em" viewBox="0 0 448 512">
    <path d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"/>
  </svg>
</pf-button>

Size

Medium Button Large Button

View HTML Source 
<pf-button>Medium Button</pf-button>
<pf-button size="large">Large Button</pf-button>

Click listeners

HTML 
<script type="module">
  import '@patternfly/elements/pf-button/pf-button.js';
  document.querySelector('pf-button')
    .addEventListener('click', function() {
      console.log('clicked!');
    });
</script>
<pf-button>Click me!</pf-button>
 Lit 
import { html, render } from 'lit';
import '@patternfly/elements/pf-button/pf-button.js';

render(html`
  <pf-button @click="${() => console.log('clicked!');}">
    Click me!
  </pf-button>
`, document.getElementById('container'));
 React 
import { Button } from '@patternfly/elements/react/pf-button/pf-button.js';
export function Clicker() {
  return (
    <Button onClick={() => console.log('clicked!');}>
      Click me!
    </Button>
  )
}

Slots

None

Attributes

loading-label

ARIA label for the loading indicator

Type
string
Default
'loading'
loading

Represents the state of a stateful button

DOM Property
loading
Type
boolean
Default
false
plain

Applies plain styles

DOM Property
plain
Type
boolean
Default
false
warning

Not as urgent as danger

DOM Property
warning
Type
boolean
Default
false
size
DOM Property
size
Type
'small' | 'large' | undefined
Default
unknown
icon-set

Icon set for the icon property

DOM Property
iconSet
Type
string | undefined
Default
unknown
danger
DOM Property
danger
Type
boolean
Default
false
variant

Changes the style of the button.

  • Primary: Used for the most important call to action on a page. Try to limit primary buttons to one per page.
  • Secondary: Use secondary buttons for general actions on a page, that don’t require as much emphasis as primary button actions. For example, you can use secondary buttons where there are multiple actions, like in toolbars or data lists.
  • Tertiary: Tertiary buttons are flexible and can be used as needed.
DOM Property
variant
Type
ButtonVariant
Default
'primary'
disabled

Disables the button

DOM Property
disabled
Type
boolean
Default
false
type
DOM Property
type
Type
'button' | 'submit' | 'reset' | undefined
Default
unknown
label

Accessible name for the button, use when the button does not have slotted text

DOM Property
label
Type
string | undefined
Default
unknown
value
DOM Property
value
Type
string | undefined
Default
unknown
name
DOM Property
name
Type
string | undefined
Default
unknown
icon

Shorthand for the icon slot, the value is icon name

DOM Property
icon
Type
string | undefined
Default
unknown

Methods

None

Events

None

CSS Custom Properties

CSS Property Description Default
--pf-c-button--FontSize 1rem
--pf-c-button--FontWeight 400
--pf-c-button--LineHeight 1.5
--pf-c-button--PaddingTop 0.375rem
--pf-c-button--PaddingLeft 1rem
--pf-c-button--PaddingBottom 0.375rem
--pf-c-button--PaddingRight 1rem
--pf-c-button--BorderRadius 3px
--pf-c-button--after--BorderColor transparent
--pf-c-button--after--BorderRadius 3px
--pf-c-button--after--BorderWidth 1px
--pf-c-button--active--after--BorderWidth 2px
--pf-c-button--hover--after--BorderWidth 2px
--pf-c-button--focus--after--BorderWidth 2px
--pf-c-button--m-primary--Color #fff
--pf-c-button--m-primary--BackgroundColor #06c
--pf-c-button--m-primary--active--Color #fff
--pf-c-button--m-primary--active--BackgroundColor #004080
--pf-c-button--m-primary--focus--Color #fff
--pf-c-button--m-primary--focus--BackgroundColor #004080
--pf-c-button--m-primary--hover--Color #fff
--pf-c-button--m-primary--hover--BackgroundColor #004080
--pf-c-button--m-secondary--Color #06c
--pf-c-button--m-secondary--BackgroundColor transparent
--pf-c-button--m-secondary--active--Color #06c
--pf-c-button--m-secondary--active--BackgroundColor transparent
--pf-c-button--m-secondary--active--BorderColor #06c
--pf-c-button--m-secondary--focus--Color #06c
--pf-c-button--m-secondary--focus--BackgroundColor transparent
--pf-c-button--m-secondary--focus--BorderColor #06c
--pf-c-button--m-secondary--hover--Color #06c
--pf-c-button--m-secondary--hover--BackgroundColor transparent
--pf-c-button--m-secondary--hover--BorderColor #06c
--pf-c-button--m-tertiary--Color #151515
--pf-c-button--m-tertiary--BackgroundColor transparent
--pf-c-button--m-tertiary--active--Color #151515
--pf-c-button--m-tertiary--active--BackgroundColor transparent
--pf-c-button--m-tertiary--active--BorderColor #151515
--pf-c-button--m-tertiary--focus--Color #151515
--pf-c-button--m-tertiary--focus--BackgroundColor transparent
--pf-c-button--m-tertiary--focus--BorderColor #151515
--pf-c-button--m-tertiary--hover--Color #151515
--pf-c-button--m-tertiary--hover--BackgroundColor transparent
--pf-c-button--m-tertiary--hover--BorderColor #151515
--pf-c-button--m-danger--Color #fff
--pf-c-button--m-danger--BackgroundColor #c9190b
--pf-c-button--m-danger--active--Color #fff
--pf-c-button--m-danger--active--BackgroundColor #a30000
--pf-c-button--m-danger--focus--Color #fff
--pf-c-button--m-danger--focus--BackgroundColor #a30000
--pf-c-button--m-danger--hover--Color #fff
--pf-c-button--m-danger--hover--BackgroundColor #a30000
--pf-c-button--m-secondary--m-danger--Color #c9190b
--pf-c-button--m-secondary--m-danger--BackgroundColor transparent
--pf-c-button--m-secondary--m-danger--BorderColor #c9190b
--pf-c-button--m-secondary--m-danger--active--Color #a30000
--pf-c-button--m-secondary--m-danger--active--BackgroundColor transparent
--pf-c-button--m-secondary--m-danger--active--BorderColor #c9190b
--pf-c-button--m-secondary--m-danger--focus--Color #a30000
--pf-c-button--m-secondary--m-danger--focus--BackgroundColor transparent
--pf-c-button--m-secondary--m-danger--focus--BorderColor #c9190b
--pf-c-button--m-secondary--m-danger--hover--Color #a30000
--pf-c-button--m-secondary--m-danger--hover--BackgroundColor transparent
--pf-c-button--m-secondary--m-danger--hover--BorderColor #c9190b
--pf-c-button--m-control--disabled--BackgroundColor #f0f0f0
--pf-c-button--m-control--BorderRadius 0
--pf-c-button--m-control--after--BorderWidth 1px
--pf-c-button--m-control--after--BorderTopColor #f0f0f0
--pf-c-button--m-control--after--BorderRightColor #f0f0f0
--pf-c-button--m-control--after--BorderBottomColor #8a8d90
--pf-c-button--m-control--after--BorderLeftColor #f0f0f0
--pf-c-button--m-control--Color #151515
--pf-c-button--m-control--BackgroundColor #fff
--pf-c-button--m-control--active--Color #151515
--pf-c-button--m-control--active--BackgroundColor #fff
--pf-c-button--m-control--active--BorderBottomColor #06c
--pf-c-button--m-control--active--after--BorderBottomWidth 2px
--pf-c-button--m-control--focus--Color #151515
--pf-c-button--m-control--focus--BackgroundColor #fff
--pf-c-button--m-control--focus--BorderBottomColor #06c
--pf-c-button--m-control--focus--after--BorderBottomWidth 2px
--pf-c-button--m-control--hover--Color #151515
--pf-c-button--m-control--hover--BackgroundColor #fff
--pf-c-button--m-control--hover--BorderBottomColor #06c
--pf-c-button--m-control--hover--after--BorderBottomWidth 2px
--pf-c-button--disabled--Color #6a6e73
--pf-c-button--disabled--BackgroundColor #d2d2d2
--pf-c-button--disabled--after--BorderColor transparent
--pf-c-button--m-warning--Color #151515
--pf-c-button--m-warning--BackgroundColor #f0ab00
--pf-c-button--m-warning--active--Color #151515
--pf-c-button--m-warning--active--BackgroundColor #c58c00
--pf-c-button--m-warning--focus--Color #151515
--pf-c-button--m-warning--focus--BackgroundColor #c58c00
--pf-c-button--m-warning--hover--Color #151515
--pf-c-button--m-warning--hover--BackgroundColor #c58c00
--pf-c-button--m-plain--BackgroundColor transparent
--pf-c-button--m-plain--Color #6a6e73
--pf-c-button--m-plain--hover--BackgroundColor transparent
--pf-c-button--m-plain--hover--Color #151515
--pf-c-button--m-plain--focus--BackgroundColor transparent
--pf-c-button--m-plain--focus--Color #151515
--pf-c-button--m-plain--active--BackgroundColor transparent
--pf-c-button--m-plain--active--Color #151515
--pf-c-button--m-plain--disabled--Color #d2d2d2
--pf-c-button--m-plain--disabled--BackgroundColor transparent
© 2018-2023 Red Hat, Inc. Deploys by Netlify