Examples
Props
Button
Name | Type | Default | Description |
---|---|---|---|
aria-label | string | Adds accessible text to the button. | |
children | React.ReactNode | Content rendered inside the button | |
className | string | Additional classes added to the button | |
component | React.ElementType<any> | React.ComponentType<any> | Sets the base component to render. defaults to button | |
icon | React.ReactNode | null | Icon for the button. Usable by all variants except for plain. | |
iconPosition | 'left' | 'right' | Sets position of the link icon | |
innerRef | React.Ref<any> | Forwarded ref | |
inoperableEvents | string[] | Events to prevent when the button is in an aria-disabled state | |
isActive | boolean | Adds active styling to button. | |
isAriaDisabled | boolean | Adds disabled styling and communicates that the button is disabled using the aria-disabled html attribute | |
isBlock | boolean | Adds block styling to button | |
isDanger | boolean | Adds danger styling to secondary or link button variants | |
isDisabled | boolean | Adds disabled styling and disables the button using the disabled html attribute | |
isInline | boolean | Adds inline styling to a link button | |
isLarge | boolean | Adds large styling to the button | |
isLoading | boolean | Adds progress styling to button | |
isSmall | boolean | Adds small styling to the button | |
spinnerAriaLabel | string | Accessible label for the spinner to describe what is loading | |
spinnerAriaLabelledBy | string | Id of element which describes what is being loaded | |
spinnerAriaValueText | string | Text describing that current loading status or progress | |
tabIndex | number | Sets the button tabindex. | |
type | 'button' | 'submit' | 'reset' | Sets button type | |
variant | 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'link' | 'plain' | 'control' | Adds button variant styles |
CSS variables
.pf-c-button | --pf-c-button--PaddingTop | 0.375rem | |
.pf-c-button | --pf-c-button--PaddingRight | 1rem | |
.pf-c-button | --pf-c-button--PaddingBottom | 0.375rem | |
.pf-c-button | --pf-c-button--PaddingLeft | 1rem | |
.pf-c-button | --pf-c-button--LineHeight | 1.5 | |
.pf-c-button | --pf-c-button--FontWeight | 400 | |
.pf-c-button | --pf-c-button--FontSize | 1rem | |
.pf-c-button | --pf-c-button--BackgroundColor | transparent | |
.pf-c-button | --pf-c-button--BorderRadius | 3px | |
.pf-c-button | --pf-c-button--after--BorderRadius | 3px | |
.pf-c-button | --pf-c-button--after--BorderColor | transparent | |
.pf-c-button | --pf-c-button--after--BorderWidth | 1px | |
.pf-c-button | --pf-c-button--hover--after--BorderWidth | 2px | |
.pf-c-button | --pf-c-button--focus--after--BorderWidth | 2px | |
.pf-c-button | --pf-c-button--active--after--BorderWidth | 2px | |
.pf-c-button | --pf-c-button--disabled--Color | #6a6e73 | |
.pf-c-button | --pf-c-button--disabled--BackgroundColor | #d2d2d2 | |
.pf-c-button | --pf-c-button--disabled--after--BorderColor | transparent | |
.pf-c-button | --pf-c-button--m-primary--BackgroundColor | #06c | |
.pf-c-button | --pf-c-button--m-primary--Color | #fff | |
.pf-c-button | --pf-c-button--m-primary--hover--BackgroundColor | #004080 | |
.pf-c-button | --pf-c-button--m-primary--hover--Color | #fff | |
.pf-c-button | --pf-c-button--m-primary--focus--BackgroundColor | #004080 | |
.pf-c-button | --pf-c-button--m-primary--focus--Color | #fff | |
.pf-c-button | --pf-c-button--m-primary--active--BackgroundColor | #004080 | |
.pf-c-button | --pf-c-button--m-primary--active--Color | #fff | |
.pf-c-button | --pf-c-button--m-secondary--BackgroundColor | transparent | |
.pf-c-button | --pf-c-button--m-secondary--after--BorderColor | #06c | |
.pf-c-button | --pf-c-button--m-secondary--Color | #06c | |
.pf-c-button | --pf-c-button--m-secondary--hover--BackgroundColor | transparent | |
.pf-c-button | --pf-c-button--m-secondary--hover--after--BorderColor | #06c | |
.pf-c-button | --pf-c-button--m-secondary--hover--Color | #06c | |
.pf-c-button | --pf-c-button--m-secondary--focus--BackgroundColor | transparent | |
.pf-c-button | --pf-c-button--m-secondary--focus--after--BorderColor | #06c | |
.pf-c-button | --pf-c-button--m-secondary--focus--Color | #06c | |
.pf-c-button | --pf-c-button--m-secondary--active--BackgroundColor | transparent | |
.pf-c-button | --pf-c-button--m-secondary--active--after--BorderColor | #06c | |
.pf-c-button | --pf-c-button--m-secondary--active--Color | #06c | |
.pf-c-button | --pf-c-button--m-secondary--m-danger--BackgroundColor | transparent | |
.pf-c-button | --pf-c-button--m-secondary--m-danger--Color | #c9190b | |
.pf-c-button | --pf-c-button--m-secondary--m-danger--after--BorderColor | #c9190b | |
.pf-c-button | --pf-c-button--m-secondary--m-danger--hover--BackgroundColor | transparent | |
.pf-c-button | --pf-c-button--m-secondary--m-danger--hover--Color | #a30000 | |
.pf-c-button | --pf-c-button--m-secondary--m-danger--hover--after--BorderColor | #c9190b | |
.pf-c-button | --pf-c-button--m-secondary--m-danger--focus--BackgroundColor | transparent | |
.pf-c-button | --pf-c-button--m-secondary--m-danger--focus--Color | #a30000 | |
.pf-c-button | --pf-c-button--m-secondary--m-danger--focus--after--BorderColor | #c9190b | |
.pf-c-button | --pf-c-button--m-secondary--m-danger--active--BackgroundColor | transparent | |
.pf-c-button | --pf-c-button--m-secondary--m-danger--active--Color | #a30000 | |
.pf-c-button | --pf-c-button--m-secondary--m-danger--active--after--BorderColor | #c9190b | |
.pf-c-button | --pf-c-button--m-tertiary--BackgroundColor | transparent | |
.pf-c-button | --pf-c-button--m-tertiary--after--BorderColor | #151515 | |
.pf-c-button | --pf-c-button--m-tertiary--Color | #151515 | |
.pf-c-button | --pf-c-button--m-tertiary--hover--BackgroundColor | transparent | |
.pf-c-button | --pf-c-button--m-tertiary--hover--after--BorderColor | #151515 | |
.pf-c-button | --pf-c-button--m-tertiary--hover--Color | #151515 | |
.pf-c-button | --pf-c-button--m-tertiary--focus--BackgroundColor | transparent | |
.pf-c-button | --pf-c-button--m-tertiary--focus--after--BorderColor | #151515 | |
.pf-c-button | --pf-c-button--m-tertiary--focus--Color | #151515 | |
.pf-c-button | --pf-c-button--m-tertiary--active--BackgroundColor | transparent | |
.pf-c-button | --pf-c-button--m-tertiary--active--after--BorderColor | #151515 | |
.pf-c-button | --pf-c-button--m-tertiary--active--Color | #151515 | |
.pf-c-button | --pf-c-button--m-warning--BackgroundColor | #f0ab00 | |
.pf-c-button | --pf-c-button--m-warning--Color | #151515 | |
.pf-c-button | --pf-c-button--m-warning--hover--BackgroundColor | #c58c00 | |
.pf-c-button | --pf-c-button--m-warning--hover--Color | #151515 | |
.pf-c-button | --pf-c-button--m-warning--focus--BackgroundColor | #c58c00 | |
.pf-c-button | --pf-c-button--m-warning--focus--Color | #151515 | |
.pf-c-button | --pf-c-button--m-warning--active--BackgroundColor | #c58c00 | |
.pf-c-button | --pf-c-button--m-warning--active--Color | #151515 | |
.pf-c-button | --pf-c-button--m-danger--BackgroundColor | #c9190b | |
.pf-c-button | --pf-c-button--m-danger--Color | #fff | |
.pf-c-button | --pf-c-button--m-danger--hover--BackgroundColor | #a30000 | |
.pf-c-button | --pf-c-button--m-danger--hover--Color | #fff | |
.pf-c-button | --pf-c-button--m-danger--focus--BackgroundColor | #a30000 | |
.pf-c-button | --pf-c-button--m-danger--focus--Color | #fff | |
.pf-c-button | --pf-c-button--m-danger--active--BackgroundColor | #a30000 | |
.pf-c-button | --pf-c-button--m-danger--active--Color | #fff | |
.pf-c-button | --pf-c-button--m-link--BackgroundColor | transparent | |
.pf-c-button | --pf-c-button--m-link--Color | #06c | |
.pf-c-button | --pf-c-button--m-link--hover--BackgroundColor | transparent | |
.pf-c-button | --pf-c-button--m-link--hover--Color | #004080 | |
.pf-c-button | --pf-c-button--m-link--focus--BackgroundColor | transparent | |
.pf-c-button | --pf-c-button--m-link--focus--Color | #004080 | |
.pf-c-button | --pf-c-button--m-link--active--BackgroundColor | transparent | |
.pf-c-button | --pf-c-button--m-link--active--Color | #004080 | |
.pf-c-button | --pf-c-button--m-link--disabled--BackgroundColor | transparent | |
.pf-c-button | --pf-c-button--m-link--m-inline--FontSize | inherit | |
.pf-c-button | --pf-c-button--m-link--m-inline--hover--TextDecoration | underline | |
.pf-c-button | --pf-c-button--m-link--m-inline--hover--Color | #004080 | |
.pf-c-button | --pf-c-button--m-link--m-danger--BackgroundColor | transparent | |
.pf-c-button | --pf-c-button--m-link--m-danger--Color | #c9190b | |
.pf-c-button | --pf-c-button--m-link--m-danger--hover--BackgroundColor | transparent | |
.pf-c-button | --pf-c-button--m-link--m-danger--hover--Color | #a30000 | |
.pf-c-button | --pf-c-button--m-link--m-danger--focus--BackgroundColor | transparent | |
.pf-c-button | --pf-c-button--m-link--m-danger--focus--Color | #a30000 | |
.pf-c-button | --pf-c-button--m-link--m-danger--active--BackgroundColor | transparent | |
.pf-c-button | --pf-c-button--m-link--m-danger--active--Color | #a30000 | |
.pf-c-button | --pf-c-button--m-plain--BackgroundColor | transparent | |
.pf-c-button | --pf-c-button--m-plain--Color | #6a6e73 | |
.pf-c-button | --pf-c-button--m-plain--hover--BackgroundColor | transparent | |
.pf-c-button | --pf-c-button--m-plain--hover--Color | #151515 | |
.pf-c-button | --pf-c-button--m-plain--focus--BackgroundColor | transparent | |
.pf-c-button | --pf-c-button--m-plain--focus--Color | #151515 | |
.pf-c-button | --pf-c-button--m-plain--active--BackgroundColor | transparent | |
.pf-c-button | --pf-c-button--m-plain--active--Color | #151515 | |
.pf-c-button | --pf-c-button--m-plain--disabled--Color | #d2d2d2 | |
.pf-c-button | --pf-c-button--m-plain--disabled--BackgroundColor | transparent | |
.pf-c-button | --pf-c-button--m-control--BackgroundColor | #fff | |
.pf-c-button | --pf-c-button--m-control--Color | #151515 | |
.pf-c-button | --pf-c-button--m-control--BorderRadius | 0 | |
.pf-c-button | --pf-c-button--m-control--after--BorderWidth | 1px | |
.pf-c-button | --pf-c-button--m-control--after--BorderTopColor | #f0f0f0 | |
.pf-c-button | --pf-c-button--m-control--after--BorderRightColor | #f0f0f0 | |
.pf-c-button | --pf-c-button--m-control--after--BorderBottomColor | #8a8d90 | |
.pf-c-button | --pf-c-button--m-control--after--BorderLeftColor | #f0f0f0 | |
.pf-c-button | --pf-c-button--m-control--disabled--BackgroundColor | #f0f0f0 | |
.pf-c-button | --pf-c-button--m-control--hover--BackgroundColor | #fff | |
.pf-c-button | --pf-c-button--m-control--hover--Color | #151515 | |
.pf-c-button | --pf-c-button--m-control--hover--after--BorderBottomWidth | 2px | |
.pf-c-button | --pf-c-button--m-control--hover--after--BorderBottomColor | #06c | |
.pf-c-button | --pf-c-button--m-control--active--BackgroundColor | #fff | |
.pf-c-button | --pf-c-button--m-control--active--Color | #151515 | |
.pf-c-button | --pf-c-button--m-control--active--after--BorderBottomWidth | 2px | |
.pf-c-button | --pf-c-button--m-control--active--after--BorderBottomColor | #06c | |
.pf-c-button | --pf-c-button--m-control--focus--BackgroundColor | #fff | |
.pf-c-button | --pf-c-button--m-control--focus--Color | #151515 | |
.pf-c-button | --pf-c-button--m-control--focus--after--BorderBottomWidth | 2px | |
.pf-c-button | --pf-c-button--m-control--focus--after--BorderBottomColor | #06c | |
.pf-c-button | --pf-c-button--m-control--m-expanded--BackgroundColor | #fff | |
.pf-c-button | --pf-c-button--m-control--m-expanded--Color | #151515 | |
.pf-c-button | --pf-c-button--m-control--m-expanded--after--BorderBottomWidth | 2px | |
.pf-c-button | --pf-c-button--m-control--m-expanded--after--BorderBottomColor | #06c | |
.pf-c-button | --pf-c-button--m-small--FontSize | 0.875rem | |
.pf-c-button | --pf-c-button--m-display-lg--PaddingTop | 1rem | |
.pf-c-button | --pf-c-button--m-display-lg--PaddingRight | 2rem | |
.pf-c-button | --pf-c-button--m-display-lg--PaddingBottom | 1rem | |
.pf-c-button | --pf-c-button--m-display-lg--PaddingLeft | 2rem | |
.pf-c-button | --pf-c-button--m-display-lg--FontWeight | 700 | |
.pf-c-button | --pf-c-button--m-link--m-display-lg--FontSize | 1.125rem | |
.pf-c-button | --pf-c-button__icon--m-start--MarginRight | 0.25rem | |
.pf-c-button | --pf-c-button__icon--m-end--MarginLeft | 0.25rem | |
.pf-c-button | --pf-c-button__progress--width | calc(1.125rem + 0.5rem) | |
.pf-c-button | --pf-c-button__progress--Opacity | 0 | |
.pf-c-button | --pf-c-button__progress--TranslateY | -50% | |
.pf-c-button | --pf-c-button__progress--TranslateX | 0 | |
.pf-c-button | --pf-c-button__progress--Top | 50% | |
.pf-c-button | --pf-c-button__progress--Left | 1rem | |
.pf-c-button | --pf-c-button--m-progress--TransitionProperty | padding | |
.pf-c-button | --pf-c-button--m-progress--TransitionDuration | 250ms | |
.pf-c-button | --pf-c-button--m-progress--PaddingRight | calc(1rem + calc(1.125rem + 0.5rem) / 2) | |
.pf-c-button | --pf-c-button--m-progress--PaddingLeft | calc(1rem + calc(1.125rem + 0.5rem) / 2) | |
.pf-c-button | --pf-c-button--m-in-progress--PaddingRight | 1rem | |
.pf-c-button | --pf-c-button--m-in-progress--PaddingLeft | calc(1rem + calc(1.125rem + 0.5rem)) | |
.pf-c-button | --pf-c-button--m-in-progress--m-plain--Color | #06c | |
.pf-c-button | --pf-c-button--m-in-progress--m-plain__progress--Left | 50% | |
.pf-c-button | --pf-c-button--m-in-progress--m-plain__progress--TranslateX | -50% | |
.pf-c-button:hover | --pf-c-button--after--BorderWidth | 2px | |
.pf-c-button:focus | --pf-c-button--after--BorderWidth | 2px | |
.pf-c-button:active | --pf-c-button--after--BorderWidth | 2px | |
.pf-c-button.pf-m-small | --pf-c-button--FontSize | 0.875rem | |
.pf-c-button.pf-m-primary.pf-m-display-lg | --pf-c-button--PaddingTop | 1rem | |
.pf-c-button.pf-m-primary.pf-m-display-lg | --pf-c-button--PaddingRight | 2rem | |
.pf-c-button.pf-m-primary.pf-m-display-lg | --pf-c-button--PaddingBottom | 1rem | |
.pf-c-button.pf-m-primary.pf-m-display-lg | --pf-c-button--PaddingLeft | 2rem | |
.pf-c-button.pf-m-primary.pf-m-display-lg | --pf-c-button--FontWeight | 700 | |
.pf-c-button.pf-m-primary:hover | --pf-c-button--m-primary--Color | #fff | |
.pf-c-button.pf-m-primary:hover | --pf-c-button--m-primary--BackgroundColor | #004080 | |
.pf-c-button.pf-m-primary:focus | --pf-c-button--m-primary--Color | #fff | |
.pf-c-button.pf-m-primary:focus | --pf-c-button--m-primary--BackgroundColor | #004080 | |
.pf-c-button.pf-m-primary:active | --pf-c-button--m-primary--Color | #fff | |
.pf-c-button.pf-m-primary:active | --pf-c-button--m-primary--BackgroundColor | #004080 | |
.pf-c-button.pf-m-secondary | --pf-c-button--after--BorderColor | #06c | |
.pf-c-button.pf-m-secondary:hover | --pf-c-button--m-secondary--Color | #06c | |
.pf-c-button.pf-m-secondary:hover | --pf-c-button--m-secondary--BackgroundColor | transparent | |
.pf-c-button.pf-m-secondary:hover | --pf-c-button--after--BorderColor | #06c | |
.pf-c-button.pf-m-secondary:focus | --pf-c-button--m-secondary--Color | #06c | |
.pf-c-button.pf-m-secondary:focus | --pf-c-button--m-secondary--BackgroundColor | transparent | |
.pf-c-button.pf-m-secondary:focus | --pf-c-button--after--BorderColor | #06c | |
.pf-c-button.pf-m-secondary.pf-m-active | --pf-c-button--m-secondary--Color | #06c | |
.pf-c-button.pf-m-secondary.pf-m-active | --pf-c-button--m-secondary--BackgroundColor | transparent | |
.pf-c-button.pf-m-secondary.pf-m-active | --pf-c-button--after--BorderColor | #06c | |
.pf-c-button.pf-m-tertiary | --pf-c-button--after--BorderColor | #151515 | |
.pf-c-button.pf-m-tertiary:hover | --pf-c-button--m-tertiary--Color | #151515 | |
.pf-c-button.pf-m-tertiary:hover | --pf-c-button--m-tertiary--BackgroundColor | transparent | |
.pf-c-button.pf-m-tertiary:hover | --pf-c-button--after--BorderColor | #151515 | |
.pf-c-button.pf-m-tertiary:focus | --pf-c-button--m-tertiary--Color | #151515 | |
.pf-c-button.pf-m-tertiary:focus | --pf-c-button--m-tertiary--BackgroundColor | transparent | |
.pf-c-button.pf-m-tertiary:focus | --pf-c-button--after--BorderColor | #151515 | |
.pf-c-button.pf-m-tertiary:active | --pf-c-button--m-tertiary--Color | #151515 | |
.pf-c-button.pf-m-tertiary:active | --pf-c-button--m-tertiary--BackgroundColor | transparent | |
.pf-c-button.pf-m-tertiary:active | --pf-c-button--after--BorderColor | #151515 | |
.pf-c-button.pf-m-link | --pf-c-button--disabled--BackgroundColor | transparent | |
.pf-c-button.pf-m-link:not(.pf-m-inline):hover | --pf-c-button--m-link--Color | #004080 | |
.pf-c-button.pf-m-link:not(.pf-m-inline):hover | --pf-c-button--m-link--BackgroundColor | transparent | |
.pf-c-button.pf-m-link:not(.pf-m-inline):focus | --pf-c-button--m-link--Color | #004080 | |
.pf-c-button.pf-m-link:not(.pf-m-inline):focus | --pf-c-button--m-link--BackgroundColor | transparent | |
.pf-c-button.pf-m-link:not(.pf-m-inline):active | --pf-c-button--m-link--Color | #004080 | |
.pf-c-button.pf-m-link:not(.pf-m-inline):active | --pf-c-button--m-link--BackgroundColor | transparent | |
.pf-c-button.pf-m-link.pf-m-inline | --pf-c-button--FontSize | inherit | |
.pf-c-button.pf-m-link.pf-m-inline:hover | --pf-c-button--m-link--Color | #004080 | |
.pf-c-button.pf-m-link.pf-m-display-lg | --pf-c-button--FontSize | 1.125rem | |
.pf-c-button.pf-m-danger:hover | --pf-c-button--m-danger--Color | #fff | |
.pf-c-button.pf-m-danger:hover | --pf-c-button--m-danger--BackgroundColor | #a30000 | |
.pf-c-button.pf-m-danger:focus | --pf-c-button--m-danger--Color | #fff | |
.pf-c-button.pf-m-danger:focus | --pf-c-button--m-danger--BackgroundColor | #a30000 | |
.pf-c-button.pf-m-danger:active | --pf-c-button--m-danger--Color | #fff | |
.pf-c-button.pf-m-danger:active | --pf-c-button--m-danger--BackgroundColor | #a30000 | |
.pf-c-button.pf-m-danger.pf-m-secondary | --pf-c-button--m-danger--Color | #c9190b | |
.pf-c-button.pf-m-danger.pf-m-secondary | --pf-c-button--m-danger--BackgroundColor | transparent | |
.pf-c-button.pf-m-danger.pf-m-secondary | --pf-c-button--after--BorderColor | #c9190b | |
.pf-c-button.pf-m-danger.pf-m-secondary:hover | --pf-c-button--m-secondary--m-danger--Color | #a30000 | |
.pf-c-button.pf-m-danger.pf-m-secondary:hover | --pf-c-button--m-secondary--m-danger--BackgroundColor | transparent | |
.pf-c-button.pf-m-danger.pf-m-secondary:hover | --pf-c-button--after--BorderColor | #c9190b | |
.pf-c-button.pf-m-danger.pf-m-secondary:focus | --pf-c-button--m-secondary--m-danger--Color | #a30000 | |
.pf-c-button.pf-m-danger.pf-m-secondary:focus | --pf-c-button--m-secondary--m-danger--BackgroundColor | transparent | |
.pf-c-button.pf-m-danger.pf-m-secondary:focus | --pf-c-button--after--BorderColor | #c9190b | |
.pf-c-button.pf-m-danger.pf-m-secondary:active | --pf-c-button--m-secondary--m-danger--Color | #a30000 | |
.pf-c-button.pf-m-danger.pf-m-secondary:active | --pf-c-button--m-secondary--m-danger--BackgroundColor | transparent | |
.pf-c-button.pf-m-danger.pf-m-secondary:active | --pf-c-button--after--BorderColor | #c9190b | |
.pf-c-button.pf-m-danger.pf-m-link | --pf-c-button--m-danger--Color | #c9190b | |
.pf-c-button.pf-m-danger.pf-m-link | --pf-c-button--m-danger--BackgroundColor | transparent | |
.pf-c-button.pf-m-danger.pf-m-link:hover | --pf-c-button--m-link--m-danger--Color | #a30000 | |
.pf-c-button.pf-m-danger.pf-m-link:hover | --pf-c-button--m-link--m-danger--BackgroundColor | transparent | |
.pf-c-button.pf-m-danger.pf-m-link:focus | --pf-c-button--m-link--m-danger--Color | #a30000 | |
.pf-c-button.pf-m-danger.pf-m-link:focus | --pf-c-button--m-link--m-danger--BackgroundColor | transparent | |
.pf-c-button.pf-m-danger.pf-m-link:active | --pf-c-button--m-link--m-danger--Color | #a30000 | |
.pf-c-button.pf-m-danger.pf-m-link:active | --pf-c-button--m-link--m-danger--BackgroundColor | transparent | |
.pf-c-button.pf-m-warning:hover | --pf-c-button--m-warning--Color | #151515 | |
.pf-c-button.pf-m-warning:hover | --pf-c-button--m-warning--BackgroundColor | #c58c00 | |
.pf-c-button.pf-m-warning:focus | --pf-c-button--m-warning--Color | #151515 | |
.pf-c-button.pf-m-warning:focus | --pf-c-button--m-warning--BackgroundColor | #c58c00 | |
.pf-c-button.pf-m-warning:active | --pf-c-button--m-warning--Color | #151515 | |