Skip to content
PatternFly.org Contribute on Github
PatternFly Elements
Versions v4 v3 v2 v1

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 Link Go to PatternFly
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>
<pf-button variant="link" href="#link">Link</pf-button>
<pf-button variant="link" href="https://patternflyelements.org/" target="_blank" icon="location-arrow">Go to PatternFly</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</span><span class="token html language-html">   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>pf-button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'clicked!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>     Click me!   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>pf-button</span><span class="token punctuation">></span></span> </span><span class="token template-punctuation string">, 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'
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

Form value for the button

DOM Property
value
Type
string | undefined
Default
unknown
name

Form element name for the button

DOM Property
name
Type
string | undefined
Default
unknown
disabled

Disables the button

DOM Property
disabled
Type
boolean
Default
false
loading

Represents the state of a stateful button

DOM Property
loading
Type
boolean
Default
false
size

Changes the size of the button.

DOM Property
size
Type
'small' | 'large' | undefined
Default
unknown
warning

Not as urgent as danger

DOM Property
warning
Type
boolean
Default
false
danger

Use danger buttons for actions a user can take that are potentially destructive or difficult/impossible to undo, like deleting or removing user data.

DOM Property
danger
Type
boolean
Default
false
plain

Applies plain styles

DOM Property
plain
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'
inline
DOM Property
inline
Type
boolean
Default
false
block
DOM Property
block
Type
boolean
Default
false
icon

Shorthand for the icon slot, the value is icon name

DOM Property
icon
Type
string | undefined
Default
unknown
icon-set

Icon set for the icon property

DOM Property
iconSet
Type
string | undefined
Default
unknown
href

Store the URL Link

DOM Property
href
Type
string | undefined
Default
unknown
target

Redirecting the URL Link to new Tab

DOM Property
target
Type
string | undefined
Default
unknown

Methods

formDisabledCallback()

Events

click
Event Type: 
MouseEvent

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-2024 Red Hat, Inc. Deploys by Netlify