Button
A button communicates and triggers user actions when clicked or selected.
Use buttons for actions such as submitting a form, canceling a process, or
navigating to another page. Icon-only buttons MUST provide an accessible-label.
This is a Form-Associated Custom Element (FACE). Form participation and ARIA
(role, aria-label, aria-disabled, aria-expanded) are managed through
ElementInternals via InternalsController — not a slotted native <button>.
Overview
A button communicates and triggers user actions when clicked or selected.
Installation
npm install @patternfly/elementsUsage
Variants
View HTML Source
<pf-v6-button>Primary</pf-v6-button>
<pf-v6-button variant="secondary">Secondary</pf-v6-button>
<pf-v6-button variant="tertiary">Tertiary</pf-v6-button>
<pf-v6-button variant="danger">Danger</pf-v6-button>
<pf-v6-button variant="warning">Warning</pf-v6-button>
<pf-v6-button variant="link">Link</pf-v6-button>
Disabled
View HTML Source
<pf-v6-button disabled>Disabled</pf-v6-button>
<pf-v6-button disabled-focusable>Disabled focusable</pf-v6-button>
Form submit
View HTML Source
<form>
<pf-v6-button type="submit">Save</pf-v6-button>
<pf-v6-button type="reset" variant="secondary">Reset</pf-v6-button>
</form>
Slots
- Default Slot
-
Button label text
-
icon -
Icon displayed at the start or end of the button
-
count -
Count badge displayed after the label
Attributes
variant-
Visual style of the button.
- Primary: most important call to action; limit to one per page
- Secondary: general actions that need less emphasis
- Tertiary: classic button format with still less emphasis
- Danger: potentially destructive or hard-to-undo actions
- Warning: important setting changes that are not destructive
- Link: low-emphasis actions or navigation
- Plain: icon-labeled actions with no chrome
- Control: for pairing with other controls in an input group
- Stateful: notification state (
read,unread,attention)
- DOM Property
variant- Type
-
'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'link' | 'plain' | 'control' | 'stateful' - Default
-
'primary'
size-
Size of the button. Omit for default size.
- DOM Property
size- Type
-
'sm' | 'lg' - Default
-
unknown
type-
Native form button type. Defaults to
button(does not submit), matching ReactButton. Settype="submit"ortype="reset"for form actions.- DOM Property
type- Type
-
'button' | 'submit' | 'reset' - Default
-
unknown
state-
State for the stateful variant. Defaults to unread when variant is stateful.
- DOM Property
state- Type
-
'read' | 'unread' | 'attention' - Default
-
unknown
value-
Form value for the button
- DOM Property
value- Type
-
string - Default
-
unknown
name-
Form element name for the button
- DOM Property
name- Type
-
string - Default
-
unknown
accessible-label-
Accessible name when the button has no visible text
- DOM Property
accessibleLabel- Type
-
string - Default
-
unknown
disabled-
Disables the button and removes it from the tab order
- DOM Property
disabled- Type
-
boolean - Default
-
false
disabled-focusable-
Disables activation while keeping the button focusable. Use when a disabled button still needs a tooltip or other focus treatment.
- DOM Property
disabledFocusable- Type
-
boolean - Default
-
false
loading-
Progress state (React
isLoadingtri-state):- omit /
null— no progress layout true/loading— show spinner and in-progress stylingfalse/loading="false"— reserve progress padding without a spinner
- DOM Property
loading- Type
-
boolean | null - Default
-
null
- omit /
loading-label-
Accessible label for the loading spinner
- DOM Property
loadingLabel- Type
-
string - Default
-
'Loading'
block-
Spans the full width of the parent
- DOM Property
block- Type
-
boolean - Default
-
false
inline-
Renders a link variant inline with surrounding text
- DOM Property
inline- Type
-
boolean - Default
-
false
danger-
Applies danger styling to secondary or link variants
- DOM Property
danger- Type
-
boolean - Default
-
false
clicked-
Applies clicked styling
- DOM Property
clicked- Type
-
boolean - Default
-
false
favorite-
Renders as a favorite toggle; overrides the icon slot
- DOM Property
favorite- Type
-
boolean - Default
-
false
favorited-
Whether the favorite toggle is currently favorited
- DOM Property
favorited- Type
-
boolean - Default
-
false
settings-
Renders as a settings button; overrides the icon slot
- DOM Property
settings- Type
-
boolean - Default
-
false
hamburger-
Renders as a hamburger button; overrides the icon slot
- DOM Property
hamburger- Type
-
boolean - Default
-
false
expanded-
Required when
hamburgeris set; reflects expansion of controlled content- DOM Property
expanded- Type
-
boolean - Default
-
unknown
hamburger-variant-
Animates the hamburger icon toward expand or collapse
- DOM Property
hamburgerVariant- Type
-
'expand' | 'collapse' - Default
-
unknown
no-padding-
Removes padding from a plain variant for inline icon placement
- DOM Property
noPadding- Type
-
boolean - Default
-
false
icon-position-
Icon position relative to the label. Defaults to start.
left/rightare accepted as deprecated aliases forstart/end.- DOM Property
iconPosition- Type
-
'start' | 'end' | 'left' | 'right' - Default
-
unknown
href-
When set with
variant="link", renders as an anchor- DOM Property
href- Type
-
string - Default
-
unknown
target-
Target for the link when
hrefis set- DOM Property
target- Type
-
string - Default
-
unknown
icon-
Shorthand icon name for the icon slot
- DOM Property
icon- Type
-
string - Default
-
unknown
icon-set-
Icon set for the
iconproperty- DOM Property
iconSet- Type
-
string - Default
-
unknown
Methods
None
Events
None
CSS Custom Properties
| CSS Property | Description | Default |
|---|---|---|
--pf-v6-c-button--BackgroundColor |
Button background color |
—
|
--pf-v6-c-button--Color |
Button text color |
—
|
--pf-v6-c-button--BorderColor |
Button border color |
—
|
--pf-v6-c-button--BorderWidth |
Button border width |
—
|
--pf-v6-c-button--BorderRadius |
Button border radius |
—
|
--pf-v6-c-button--FontSize |
Button font size |
—
|
--pf-v6-c-button--PaddingBlockStart |
Block-start padding |
—
|
--pf-v6-c-button--PaddingBlockEnd |
Block-end padding |
—
|
--pf-v6-c-button--PaddingInlineStart |
Inline-start padding |
—
|
--pf-v6-c-button--PaddingInlineEnd |
Inline-end padding |
—
|
--pf-v6-c-button__icon--Color |
Icon color |
—
|
--pf-v6-c-button--hover--BackgroundColor |
Hover background |
—
|
--pf-v6-c-button--m-clicked--BackgroundColor |
Clicked background |
—
|
--pf-t--global--font--line-height--body |
1.5
|
|
--pf-t--global--font--weight--body--default |
400
|
|
--pf-t--global--font--size--body--default |
0.875rem
|
|
--pf-t--global--border--width--action--default |
1px
|
|
--pf-t--global--border--radius--pill |
999px
|
|
--pf-t--global--motion--duration--fade--default |
—
|
|
--pf-t--global--border--width--action--hover |
—
|
|
--pf-t--global--border--width--action--clicked |
—
|
|
--pf-t--global--text--color--on-brand--default |
#ffffff
|
|
--pf-t--global--color--brand--default |
#0066cc
|
|
--pf-t--global--icon--color--on-brand--default |
#ffffff
|
|
--pf-t--global--text--color--on-brand--hover |
#ffffff
|
|
--pf-t--global--color--brand--hover |
#004d99
|
|
--pf-t--global--icon--color--on-brand--hover |
#ffffff
|
|
--pf-t--global--text--color--on-brand--clicked |
#ffffff
|
|
--pf-t--global--color--brand--clicked |
#004d99
|
|
--pf-t--global--icon--color--on-brand--clicked |
#ffffff
|
|
--pf-t--global--border--color--brand--default |
#0066cc
|
|
--pf-t--global--border--color--brand--hover |
#004d99
|
|
--pf-t--global--border--color--brand--clicked |
#004d99
|
|
--pf-t--global--border--color--status--danger--default |
#b1380b
|
|
--pf-t--global--icon--color--status--danger--default |
#b1380b
|
|
--pf-t--global--border--color--status--danger--hover |
#731f00
|
|
--pf-t--global--icon--color--status--danger--hover |
#731f00
|
|
--pf-t--global--border--color--status--danger--clicked |
#731f00
|
|
--pf-t--global--icon--color--status--danger--clicked |
#731f00
|
|
--pf-t--global--motion--duration--fade--short |
—
|
|
--pf-t--global--icon--color--brand--clicked |
#004d99
|
|
--pf-t--global--text--color--brand--clicked |
#004d99
|
|
--pf-t--global--text--color--status--danger--default |
#b1380b
|
|
--pf-t--global--text--color--status--danger--hover |
#731f00
|
|
--pf-t--global--text--color--status--danger--clicked |
#731f00
|
|
--pf-t--global--text-decoration--link--line--default |
—
|
|
--pf-t--global--text-decoration--link--style--default |
—
|
|
--pf-t--global--text-decoration--link--line--hover |
—
|
|
--pf-t--global--text-decoration--link--style--hover |
—
|
|
--pf-t--global--spacer--xs |
0.25rem
|
|
--pf-t--global--text--color--brand--default |
#0066cc
|
|
--pf-t--global--text--color--brand--hover |
#004d99
|
|
--pf-t--global--icon--color--brand--hover |
#004d99
|
|
--pf-t--global--spacer--action--horizontal--plain--default |
0.5rem
|
|
--pf-t--global--background--color--action--plain--default |
rgb(255 255 255 / 0%)
|
|
--pf-t--global--background--color--action--plain--hover |
rgb(0 0 0 / 8%)
|
|
--pf-t--global--background--color--action--plain--clicked |
rgb(0 0 0 / 16%)
|
|
--pf-t--global--text--color--disabled |
—
|
|
--pf-t--global--icon--color--disabled |
—
|
|
--pf-t--global--spacer--action--horizontal--plain--compact |
0.25rem
|
|
--pf-t--global--border--width--action--plain--default |
0px
|
|
--pf-t--global--border--width--action--plain--clicked |
0px
|
|
--pf-t--global--border--width--action--plain--hover |
0px
|
|
--pf-t--global--border--color--high-contrast |
rgb(255 255 255 / 0%)
|
|
--pf-t--global--icon--color--subtle |
—
|
|
--pf-t--global--border--width--control--default |
1px
|
|
--pf-t--global--border--width--control--hover |
2px
|
|
--pf-t--global--border--width--control--clicked |
2px
|
|
--pf-t--global--border--radius--small |
6px
|
|
--pf-t--global--spacer--control--horizontal--compact |
—
|
|
--pf-t--global--border--color--default |
—
|
|
--pf-t--global--border--color--hover |
—
|
|
--pf-t--global--background--color--control--default |
#ffffff
|
|
--pf-t--global--border--color--clicked |
—
|
|
--pf-t--global--text--color--status--unread--on-default--default |
—
|
|
--pf-t--global--color--status--unread--default |
#0066cc
|
|
--pf-t--global--icon--color--status--unread--on-default--default |
—
|
|
--pf-t--global--text--color--status--unread--on-default--hover |
—
|
|
--pf-t--global--color--status--unread--hover |
#004d99
|
|
--pf-t--global--icon--color--status--unread--on-default--hover |
—
|
|
--pf-t--global--text--color--status--unread--on-default--clicked |
—
|
|
--pf-t--global--color--status--unread--clicked |
#004d99
|
|
--pf-t--global--icon--color--status--unread--on-default--clicked |
—
|
|
--pf-t--global--text--color--status--unread--on-attention--default |
—
|
|
--pf-t--global--color--status--unread--attention--default |
—
|
|
--pf-t--global--icon--color--status--unread--on-attention--default |
—
|
|
--pf-t--global--text--color--status--unread--on-attention--hover |
—
|
|
--pf-t--global--color--status--unread--attention--hover |
—
|
|
--pf-t--global--icon--color--status--unread--on-attention--hover |
—
|
|
--pf-t--global--text--color--status--unread--on-attention--clicked |
—
|
|
--pf-t--global--color--status--unread--attention--clicked |
—
|
|
--pf-t--global--icon--color--status--unread--on-attention--clicked |
—
|
|
--pf-t--global--text--color--status--on-warning--default |
#151515
|
|
--pf-t--global--color--status--warning--default |
#ffcc17
|
|
--pf-t--global--icon--color--status--on-warning--default |
#151515
|
|
--pf-t--global--text--color--status--on-warning--hover |
#151515
|
|
--pf-t--global--color--status--warning--hover |
#dca614
|
|
--pf-t--global--icon--color--status--on-warning--hover |
#151515
|
|
--pf-t--global--text--color--status--on-warning--clicked |
#151515
|
|
--pf-t--global--color--status--warning--clicked |
#dca614
|
|
--pf-t--global--icon--color--status--on-warning--clicked |
#151515
|
|
--pf-t--global--text--color--status--on-danger--default |
#ffffff
|
|
--pf-t--global--color--status--danger--default |
#b1380b
|
|
--pf-t--global--icon--color--status--on-danger--default |
#ffffff
|
|
--pf-t--global--text--color--status--on-danger--hover |
#ffffff
|
|
--pf-t--global--color--status--danger--hover |
#731f00
|
|
--pf-t--global--icon--color--status--on-danger--hover |
#ffffff
|
|
--pf-t--global--text--color--status--on-danger--clicked |
#ffffff
|
|
--pf-t--global--color--status--danger--clicked |
#731f00
|
|
--pf-t--global--icon--color--status--on-danger--clicked |
#ffffff
|
|
--pf-t--global--spacer--control--vertical--spacious |
—
|
|
--pf-t--global--spacer--action--horizontal--spacious |
2rem
|
|
--pf-t--global--font--weight--body--bold |
—
|
|
--pf-t--global--font--size--body--lg |
—
|
|
--pf-t--global--spacer--control--vertical--compact |
—
|
|
--pf-t--global--spacer--action--horizontal--compact |
1rem
|
|
--pf-t--global--text--color--on-disabled |
#6a6e73
|
|
--pf-t--global--background--color--disabled--default |
#d2d2d2
|
|
--pf-t--global--icon--color--on-disabled |
#6a6e73
|
|
--pf-t--global--icon--color--regular |
#151515
|
|
--pf-t--global--motion--duration--3xl |
—
|
|
--pf-t--global--color--favorite--default |
—
|
|
--pf-t--global--color--favorite--hover |
—
|
|
--pf-t--global--motion--timing-function--default |
—
|
|
--pf-t--global--motion--duration--icon--default |
—
|
|
--pf-t--global--icon--size--lg |
—
|
|
--pf-t--global--spacer--sm |
0.5rem
|
|
--pf-t--global--spacer--control--horizontal--default |
—
|
|
--pf-v6-c-button__progress--width |
—
|
|
--pf-t--global--icon--color--brand--default |
#0066cc
|
|
--pf-t--global--motion--timing-function--accelerate |
—
|
|
--pf-t--global--motion--duration--icon--long |
—
|
|
--pf-t--global--border--color--alt |
—
|
|
--pf-t--global--motion--timing-function--decelerate |
—
|
|
--pf-t--global--motion--duration--md |
—
|
|
--pf-v6-c-button--hamburger-icon--top--path--base |
—
|
|
--pf-v6-c-button--hamburger-icon--middle--path--base |
—
|
|
--pf-v6-c-button--hamburger-icon--arrow--path--base |
—
|
|
--pf-v6-c-button--hamburger-icon--bottom--path--base |
—
|
|
--pf-t--global--font--family--body |
"Red Hat Text", RedHatText, Helvetica, Arial, sans-serif
|
|
--pf-v6-c-button--Display |
inline-flex
|
|
--pf-v6-c-button--Gap |
var(--pf-t--global--spacer--gap--text-to-element--default, 0.5rem)
|
|
--pf-t--global--spacer--gap--text-to-element--default |
0.5rem
|
|
--pf-v6-c-button--AlignItems |
baseline
|
|
--pf-v6-c-button--JustifyContent |
center
|
|
--pf-v6-c-button--MinWidth |
—
|
|
--pf-t--global--spacer--control--vertical--default |
0.5rem
|
|
--pf-t--global--spacer--action--horizontal--default |
1.5rem
|
|
--pf-v6-c-button--FontWeight |
inherit
|
|
--pf-v6-c-button--LineHeight |
inherit
|
|
--pf-t--global--text--color--regular |
#151515
|
|
--pf-v6-c-button--TextDecorationColor |
—
|
|
--pf-v6-c-button--BorderStartStartRadius |
var(--pf-v6-c-button--BorderRadius)
|
|
--pf-v6-c-button--BorderStartEndRadius |
var(--pf-v6-c-button--BorderRadius)
|
|
--pf-v6-c-button--BorderEndStartRadius |
var(--pf-v6-c-button--BorderRadius)
|
|
--pf-v6-c-button--BorderEndEndRadius |
var(--pf-v6-c-button--BorderRadius)
|
|
--pf-v6-c-button--TransitionDelay |
—
|
|
--pf-v6-c-button--TransitionTimingFunction |
—
|
|
--pf-v6-c-button--TransitionDuration |
—
|
|
--pf-v6-c-button--TransitionProperty |
—
|
|
--pf-v6-c-button--ScaleX |
—
|
|
--pf-v6-c-button--ScaleY |
—
|
|
--pf-v6-c-button--border--offset |
—
|
|
--pf-v6-c-button--m-primary--Color |
—
|
|
--pf-v6-c-button--m-primary--BackgroundColor |
—
|
|
--pf-v6-c-button--m-primary__icon--Color |
—
|
|
--pf-v6-c-button--m-primary--hover--Color |
—
|
|
--pf-v6-c-button--m-primary--hover--BackgroundColor |
—
|
|
--pf-v6-c-button--m-primary--hover__icon--Color |
—
|
|
--pf-v6-c-button--m-primary--m-clicked--Color |
—
|
|
--pf-v6-c-button--m-primary--m-clicked--BackgroundColor |
—
|
|
--pf-v6-c-button--m-primary--m-clicked__icon--Color |
—
|
|
--pf-v6-c-button--m-secondary--Color |
—
|
|
--pf-v6-c-button--m-secondary--BorderColor |
—
|
|
--pf-v6-c-button--m-secondary--TransitionDuration |
—
|
|
--pf-v6-c-button--m-secondary__icon--Color |
—
|
|
--pf-v6-c-button--m-secondary--hover--Color |
—
|
|
--pf-v6-c-button--m-secondary--hover--BorderColor |
—
|
|
--pf-v6-c-button--m-secondary--hover__icon--Color |
—
|
|
--pf-v6-c-button--m-secondary--m-clicked--Color |
—
|
|
--pf-v6-c-button--m-secondary--m-clicked--BorderColor |
—
|
|
--pf-v6-c-button--m-secondary--m-clicked__icon--Color |
—
|
|
--pf-v6-c-button--m-secondary--m-danger--Color |
—
|
|
--pf-v6-c-button--m-secondary--m-danger__icon--Color |
—
|
|
--pf-v6-c-button--m-secondary--m-danger--hover--Color |
—
|
|
--pf-v6-c-button--m-secondary--m-danger--hover__icon--Color |
—
|
|
--pf-v6-c-button--m-secondary--m-danger--m-clicked--Color |
—
|
|
--pf-v6-c-button--m-secondary--m-danger--m-clicked__icon--Color |
—
|
|
--pf-v6-c-button--m-secondary--m-danger--BorderColor |
—
|
|
--pf-v6-c-button--m-secondary--m-danger--hover--BorderColor |
—
|
|
--pf-v6-c-button--m-secondary--m-danger--m-clicked--BorderColor |
—
|
|
--pf-v6-c-button--m-tertiary--Color |
—
|
|
--pf-v6-c-button--m-tertiary--BorderColor |
—
|
|
--pf-v6-c-button--m-tertiary--TransitionDuration |
—
|
|
--pf-v6-c-button--m-tertiary__icon--Color |
—
|
|
--pf-v6-c-button--m-tertiary--hover--Color |
—
|
|
--pf-v6-c-button--m-tertiary--hover--BorderColor |
—
|
|
--pf-v6-c-button--m-tertiary--hover__icon--Color |
—
|
|
--pf-v6-c-button--m-tertiary--m-clicked--Color |
—
|
|
--pf-v6-c-button--m-tertiary--m-clicked--BorderColor |
—
|
|
--pf-v6-c-button--m-tertiary--m-clicked__icon--Color |
—
|
|
--pf-v6-c-button--m-link--PaddingInlineEnd |
—
|
|
--pf-v6-c-button--m-link--PaddingInlineStart |
—
|
|
--pf-v6-c-button--m-link--Color |
—
|
|
--pf-v6-c-button--m-link--BorderWidth |
—
|
|
--pf-v6-c-button--m-link--hover--BorderColor |
—
|
|
--pf-v6-c-button--m-link--hover--BorderWidth |
—
|
|
--pf-v6-c-button--m-link--m-clicked--BorderColor |
—
|
|
--pf-v6-c-button--m-link--m-clicked--BorderWidth |
—
|
|
--pf-v6-c-button--m-link--BorderColor |
—
|
|
--pf-v6-c-button--m-link--BorderRadius |
—
|
|
--pf-v6-c-button--m-link--BackgroundColor |
—
|
|
--pf-v6-c-button--m-link__icon--Color |
—
|
|
--pf-v6-c-button--m-link--hover--Color |
—
|
|
--pf-v6-c-button--m-link--hover--BackgroundColor |
—
|
|
--pf-v6-c-button--m-link--hover__icon--Color |
—
|
|
--pf-v6-c-button--m-link--m-clicked--Color |
—
|
|
--pf-v6-c-button--m-link--m-clicked--BackgroundColor |
—
|
|
--pf-v6-c-button--m-link--m-clicked__icon--Color |
—
|
|
--pf-v6-c-button--m-link--m-small--PaddingInlineEnd |
—
|
|
--pf-v6-c-button--m-link--m-small--PaddingInlineStart |
—
|
|
--pf-v6-c-button--span--m-link--m-inline--Display |
—
|
|
--pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd |
—
|
|
--pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart |
—
|
|
--pf-v6-c-button--m-link--m-inline--Display |
—
|
|
--pf-v6-c-button--m-link--m-inline--JustifyContent |
—
|
|
--pf-v6-c-button--m-link--m-inline--FontSize |
—
|
|
--pf-v6-c-button--m-link--m-inline--LineHeight |
—
|
|
--pf-v6-c-button--m-link--m-inline--FontWeight |
—
|
|
--pf-v6-c-button--m-link--m-inline--PaddingBlockStart |
—
|
|
--pf-v6-c-button--m-link--m-inline--PaddingInlineEnd |
—
|
|
--pf-v6-c-button--m-link--m-inline--PaddingBlockEnd |
—
|
|
--pf-v6-c-button--m-link--m-inline--PaddingInlineStart |
—
|
|
--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart |
—
|
|
--pf-v6-c-button--m-link--m-inline--TextDecorationLine |
—
|
|
--pf-v6-c-button--m-link--m-inline--TextDecorationStyle |
—
|
|
--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine |
—
|
|
--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle |
—
|
|
--pf-v6-c-button--m-link--m-inline--disabled--Color |
—
|
|
--pf-v6-c-button--m-link--m-inline--disabled__icon--Color |
—
|
|
--pf-v6-c-button--m-link--m-inline--Color |
—
|
|
--pf-v6-c-button--m-link--m-inline__icon--Color |
—
|
|
--pf-v6-c-button--m-link--m-inline--TextDecorationColor |
—
|
|
--pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor |
—
|
|
--pf-v6-c-button--m-link--m-inline--hover--Color |
—
|
|
--pf-v6-c-button--m-link--m-inline--hover__icon--Color |
—
|
|
--pf-v6-c-button--m-link--m-danger--Color |
—
|
|
--pf-v6-c-button--m-link--m-danger--BackgroundColor |
—
|
|
--pf-v6-c-button--m-link--m-danger__icon--Color |
—
|
|
--pf-v6-c-button--m-link--m-danger--hover--Color |
—
|
|
--pf-v6-c-button--m-link--m-danger--hover--BackgroundColor |
—
|
|
--pf-v6-c-button--m-link--m-danger--hover__icon--Color |
—
|
|
--pf-v6-c-button--m-link--m-danger--m-clicked--Color |
—
|
|
--pf-v6-c-button--m-link--m-danger--m-clicked--BackgroundColor |
—
|
|
--pf-v6-c-button--m-link--m-danger--m-clicked__icon--Color |
—
|
|
--pf-v6-c-button--m-link--m-display-lg--FontSize |
—
|
|
--pf-v6-c-button--m-warning--Color |
—
|
|
--pf-v6-c-button--m-warning--BackgroundColor |
—
|
|
--pf-v6-c-button--m-warning__icon--Color |
—
|
|
--pf-v6-c-button--m-warning--hover--Color |
—
|
|
--pf-v6-c-button--m-warning--hover--BackgroundColor |
—
|
|
--pf-v6-c-button--m-warning--hover__icon--Color |
—
|
|
--pf-v6-c-button--m-warning--m-clicked--Color |
—
|
|
--pf-v6-c-button--m-warning--m-clicked--BackgroundColor |
—
|
|
--pf-v6-c-button--m-warning--m-clicked__icon--Color |
—
|
|
--pf-v6-c-button--m-danger--Color |
—
|
|
--pf-v6-c-button--m-danger--BackgroundColor |
—
|
|
--pf-v6-c-button--m-danger__icon--Color |
—
|
|
--pf-v6-c-button--m-danger--hover--Color |
—
|
|
--pf-v6-c-button--m-danger--hover--BackgroundColor |
—
|
|
--pf-v6-c-button--m-danger--hover__icon--Color |
—
|
|
--pf-v6-c-button--m-danger--m-clicked--Color |
—
|
|
--pf-v6-c-button--m-danger--m-clicked--BackgroundColor |
—
|
|
--pf-v6-c-button--m-danger--m-clicked__icon--Color |
—
|
|
--pf-v6-c-button--m-control--BorderRadius |
—
|
|
--pf-v6-c-button--m-control--PaddingInlineStart |
—
|
|
--pf-v6-c-button--m-control--PaddingInlineEnd |
—
|
|
--pf-v6-c-button--m-control--Color |
—
|
|
--pf-v6-c-button--m-control--BackgroundColor |
—
|
|
--pf-v6-c-button--m-control--BorderColor |
—
|
|
--pf-v6-c-button--m-control--BorderWidth |
—
|
|
--pf-v6-c-button--m-control__icon--Color |
—
|
|
--pf-v6-c-button--m-control--hover--Color |
—
|
|
--pf-v6-c-button--m-control--hover--BackgroundColor |
—
|
|
--pf-v6-c-button--m-control--hover--BorderColor |
—
|
|
--pf-v6-c-button--m-control--hover--BorderWidth |
—
|
|
--pf-v6-c-button--m-control--hover__icon--Color |
—
|
|
--pf-v6-c-button--m-control--m-clicked--Color |
—
|
|
--pf-v6-c-button--m-control--m-clicked--BackgroundColor |
—
|
|
--pf-v6-c-button--m-control--m-clicked--BorderColor |
—
|
|
--pf-v6-c-button--m-control--m-clicked--BorderWidth |
—
|
|
--pf-v6-c-button--m-control--m-clicked__icon--Color |
—
|
|
--pf-v6-c-button--m-control--m-small--PaddingInlineEnd |
—
|
|
--pf-v6-c-button--m-control--m-small--PaddingInlineStart |
—
|
|
--pf-v6-c-button--m-stateful--BorderRadius |
—
|
|
--pf-v6-c-button--m-stateful--PaddingInlineStart |
—
|
|
--pf-v6-c-button--m-stateful--PaddingInlineEnd |
—
|
|
--pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd |
—
|
|
--pf-v6-c-button--m-stateful--m-small--PaddingInlineStart |
—
|
|
--pf-v6-c-button--m-read--BackgroundColor |
—
|
|
--pf-v6-c-button--m-read--BorderColor |
—
|
|
--pf-v6-c-button--m-read--hover--BackgroundColor |
—
|
|
--pf-v6-c-button--m-read--hover--BorderColor |
—
|
|
--pf-v6-c-button--m-read--m-clicked--BackgroundColor |
—
|
|
--pf-v6-c-button--m-read--m-clicked--BorderColor |
—
|
|
--pf-v6-c-button--m-unread--Color |
—
|
|
--pf-v6-c-button--m-unread--BackgroundColor |
—
|
|
--pf-v6-c-button--m-unread__icon--Color |
—
|
|
--pf-v6-c-button--m-unread--hover--Color |
—
|
|
--pf-v6-c-button--m-unread--hover--BackgroundColor |
—
|
|
--pf-v6-c-button--m-unread--hover__icon--Color |
—
|
|
--pf-v6-c-button--m-unread--m-clicked--Color |
—
|
|
--pf-v6-c-button--m-unread--m-clicked--BackgroundColor |
—
|
|
--pf-v6-c-button--m-unread--m-clicked__icon--Color |
—
|
|
--pf-v6-c-button--m-attention--Color |
—
|
|
--pf-v6-c-button--m-attention--BackgroundColor |
—
|
|
--pf-v6-c-button--m-attention__icon--Color |
—
|
|
--pf-v6-c-button--m-attention--hover--Color |
—
|
|
--pf-v6-c-button--m-attention--hover--BackgroundColor |
—
|
|
--pf-v6-c-button--m-attention--hover__icon--Color |
—
|
|
--pf-v6-c-button--m-attention--m-clicked--Color |
—
|
|
--pf-v6-c-button--m-attention--m-clicked--BackgroundColor |
—
|
|
--pf-v6-c-button--m-attention--m-clicked__icon--Color |
—
|
|
--pf-v6-c-button--m-plain--BorderWidth |
—
|
|
--pf-v6-c-button--m-plain--hover--BorderColor |
—
|
|
--pf-v6-c-button--m-plain--hover--BorderWidth |
—
|
|
--pf-v6-c-button--m-plain--m-clicked--BorderColor |
—
|
|
--pf-v6-c-button--m-plain--m-clicked--BorderWidth |
—
|
|
--pf-v6-c-button--m-plain--BorderColor |
—
|
|
--pf-v6-c-button--m-plain--BorderRadius |
—
|
|
--pf-v6-c-button--m-plain--Color |
—
|
|
--pf-v6-c-button--m-plain__icon--Color |
—
|
|
--pf-v6-c-button--m-plain--BackgroundColor |
—
|
|
--pf-v6-c-button--m-plain--PaddingInlineEnd |
—
|
|
--pf-v6-c-button--m-plain--PaddingInlineStart |
—
|
|
--pf-v6-c-button--m-in-progress--m-plain--Color |
—
|
|
--pf-v6-c-button--m-plain--hover--Color |
—
|
|
--pf-v6-c-button--m-plain--hover--BackgroundColor |
—
|
|
--pf-v6-c-button--m-plain--m-clicked--Color |
—
|
|
--pf-v6-c-button--m-plain--m-clicked--BackgroundColor |
—
|
|
--pf-v6-c-button--m-plain--disabled--Color |
—
|
|
--pf-v6-c-button--m-plain--disabled__icon--Color |
—
|
|
--pf-v6-c-button--m-plain--disabled--BackgroundColor |
—
|
|
--pf-v6-c-button--m-plain--m-small--PaddingInlineEnd |
—
|
|
--pf-v6-c-button--m-plain--m-small--PaddingInlineStart |
—
|
|
--pf-v6-c-button--m-plain--m-no-padding__icon--Color |
—
|
|
--pf-v6-c-button--m-plain--m-no-padding--BackgroundColor |
—
|
|
--pf-v6-c-button--m-plain--m-no-padding--hover--BackgroundColor |
—
|
|
--pf-v6-c-button--m-plain--m-no-padding--m-clicked--BackgroundColor |
—
|
|
--pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart |
—
|
|
--pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd |
—
|
|
--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd |
—
|
|
--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart |
—
|
|
--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineEnd |
—
|
|
--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineStart |
—
|
|
--pf-v6-c-button--m-plain--m-no-padding--border--offset |
—
|
|
--pf-v6-c-button--m-plain--m-no-padding--MinWidth |
—
|
|
--pf-v6-c-button--m-block--Display |
—
|
|
--pf-v6-c-button--m-block--Width |
—
|
|
--pf-v6-c-button--m-small--PaddingBlockStart |
—
|
|
--pf-v6-c-button--m-small--PaddingInlineEnd |
—
|
|
--pf-v6-c-button--m-small--PaddingBlockEnd |
—
|
|
--pf-v6-c-button--m-small--PaddingInlineStart |
—
|
|
--pf-v6-c-button--m-display-lg--PaddingBlockStart |
—
|
|
--pf-v6-c-button--m-display-lg--PaddingInlineEnd |
—
|
|
--pf-v6-c-button--m-display-lg--PaddingBlockEnd |
—
|
|
--pf-v6-c-button--m-display-lg--PaddingInlineStart |
—
|
|
--pf-v6-c-button--m-favorite__icon--TransitionTimingFunction |
—
|
|
--pf-v6-c-button--m-favorite__icon--TransitionDuration |
—
|
|
--pf-v6-c-button--m-favorited__icon--Color |
—
|
|
--pf-v6-c-button--m-favorited--hover__icon--Color |
—
|
|
--pf-v6-c-button--m-favorited__icon--favorite--Opacity |
—
|
|
--pf-v6-c-button--m-favorited__icon--favorited--Opacity |
—
|
|
--pf-v6-c-button--m-favorited__icon--AnimationDuration |
—
|
|
--pf-v6-c-button--m-favorited__icon--AnimationTimingFunction |
—
|
|
--pf-v6-c-button--m-settings__icon--TransitionDuration |
—
|
|
--pf-v6-c-button--m-settings__icon--TransitionTimingFunction |
—
|
|
--pf-v6-c-button--m-settings--hover__icon--TransitionDuration |
—
|
|
--pf-v6-c-button--m-settings--hover__icon--TransitionTimingFunction |
—
|
|
--pf-v6-c-button--m-settings--hover__icon--Rotate |
—
|
|
--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX |
—
|
|
--pf-v6-c-button--hamburger-icon--top--collapse--path |
—
|
|
--pf-v6-c-button--hamburger-icon--arrow--collapse--path |
—
|
|
--pf-v6-c-button--hamburger-icon--bottom--collapse--path |
—
|
|
--pf-v6-c-button--m-clicked--Color |
—
|
|
--pf-v6-c-button--m-clicked--BorderWidth |
—
|
|
--pf-v6-c-button--m-clicked--BorderColor |
—
|
|
--pf-v6-c-button--m-clicked__icon--Color |
—
|
|
--pf-v6-c-button--disabled--Color |
—
|
|
--pf-v6-c-button--disabled--TextDecorationColor |
—
|
|
--pf-v6-c-button--disabled--BackgroundColor |
—
|
|
--pf-v6-c-button--disabled__icon--Color |
—
|
|
--pf-v6-c-button--TextDecorationLine |
—
|
|
--pf-v6-c-button--TextDecorationStyle |
—
|
|
--pf-v6-c-button--m-progress--PaddingInlineEnd |
—
|
|
--pf-v6-c-button--m-progress--PaddingInlineStart |
—
|
|
--pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart |
—
|
|
--pf-v6-c-button--m-in-progress--PaddingInlineEnd |
—
|
|
--pf-v6-c-button--m-in-progress--PaddingInlineStart |
—
|
|
--pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart |
—
|
|
--pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX |
—
|
|
--pf-v6-c-button__icon--MarginInlineStart |
—
|
|
--pf-v6-c-button__icon--MarginInlineEnd |
—
|
|
--pf-v6-c-button__icon--TransitionDelay |
—
|
|
--pf-v6-c-button__icon--TransitionTimingFunction |
—
|
|
--pf-v6-c-button__icon--TransitionDuration |
—
|
|
--pf-v6-c-button__icon--TransitionProperty |
—
|
|
--pf-v6-c-button__icon--Rotate |
—
|
|
--pf-v6-c-button__icon--ScaleX |
—
|
|
--pf-v6-c-button__icon--ScaleY |
—
|
|
--pf-v6-c-button__icon--m-start--MarginInlineEnd |
—
|
|
--pf-v6-c-button__icon--m-end--MarginInlineStart |
—
|
|
--pf-v6-c-button__icon--favorite--TransitionDuration |
—
|
|
--pf-v6-c-button__icon--favorite--Opacity |
—
|
|
--pf-v6-c-button__icon--favorited--Opacity |
—
|
|
--pf-v6-c-button__progress--InsetBlockStart |
—
|
|
--pf-v6-c-button__progress--InsetInlineStart |
—
|
|
--pf-v6-c-button__progress--Color |
—
|
|
--pf-v6-c-button__progress--TranslateX |
—
|
|
--pf-v6-c-button__progress--TranslateY |
—
|
|
--pf-v6-c-button--hamburger-icon--TransitionDuration |
—
|
|
--pf-v6-c-button--hamburger-icon--TransitionTimingFunction |
—
|
|
--pf-v6-c-button--hamburger-icon--top--path |
—
|
|
--pf-v6-c-button--hamburger-icon--middle--path |
—
|
|
--pf-v6-c-button--hamburger-icon--arrow--path |
—
|
|
--pf-v6-c-button--hamburger-icon--bottom--path |
—
|
|
--pf-v6-c-button--m-primary__c-badge--BorderColor |
—
|
|
--pf-v6-c-button--hover--Color |
—
|
|
--pf-v6-c-button--hover--BorderColor |
—
|
|
--pf-v6-c-button--hover--BorderWidth |
—
|
|
--pf-v6-c-button--hover--ScaleX |
—
|
|
--pf-v6-c-button--hover--ScaleY |
—
|
|
--pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color |
—
|
|
--pf-v6-c-button--hover__icon--Color |
—
|
|
--pf-v6-c-button--hover__icon--TransitionTimingFunction |
—
|
|
--pf-v6-c-button--hover__icon--TransitionDuration |
—
|
|
--pf-v6-c-button--hover__icon--TransitionProperty |
—
|
|
--pf-v6-c-button--hover__icon--Rotate |
—
|
|
--pf-v6-c-button--hover__icon--ScaleX |
—
|
|
--pf-v6-c-button--hover__icon--ScaleY |
—
|
|
--pf-v6-c-button--hover--TextDecorationLine |
—
|
|
--pf-v6-c-button--hover--TextDecorationStyle |
—
|
|
--pf-v6-c-button--hover--TextDecorationColor |
—
|
|
--pf-t--global--focus-ring--position--offset |
0.125rem
|
CSS Shadow Parts
icon-
Container for the icon slot and built-in icons
text-
Container for the default slot label
progress-
Container for the loading spinner
count-
Container for the count slot
button-
Main button surface (inner control chrome)
