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..
Overview
Installation
npm install @patternfly/elements
Usage
Link variant
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
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
View HTML Source
<pf-button>Medium Button</pf-button>
<pf-button size="large">Large Button</pf-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 |