Skip to main content Red Hat Design System logo Contribute on Github v1.4.5

Button

Overview Style Guidelines Code Demos Accessibility

Installation

Usage

rh-button

Slots 2
Slot Name Description
icon

Contains the button's icon or state indicator, e.g. a spinner.

Contains button text

Attributes 8
DOM Property Description Type Default
disabled

Disables the button

boolean
false
type
'button' | 'submit' | 'reset' | undefined
unknown
label

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

string | undefined
unknown
value

Form value for the button

string | undefined
unknown
name

Form name for the button

string | undefined
unknown
icon

Shorthand for the icon slot, the value is icon name

string | undefined
unknown
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.
| 'primary'
| 'secondary'
| 'tertiary'
| 'close'
| 'play'
'primary'
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.

boolean
false
Methods 1
Method Name Description
focus()
Events 0

None

CSS Shadow Parts 2
Part Name Description
button

Internal button element

icon

Container for the icon slot

CSS Custom Properties 0

None

Design Tokens 0

None

© 2021-2024 Red Hat, Inc. Deploys by Netlify