Skip to main content Home
About About the Design SystemRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridIconographySpacingTypography
Tokens Overview Global colorbox shadowTypographyborderopacityspacelengthIconBreakpointsMedia Queries
Elements All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Navigation (primary) Navigation (secondary) Pagination PopoverPlanned Progress stepsPlanned Site status Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Theming OverviewColor PalettesCustomizingDevelopers
Patterns All PatternsCardTabsFilterFormLinkLink with iconLogo wallSearch barSkip navigationSticky bannerSticky cardTileVideo thumbnail
Personalization All Personalization PatternsAnnouncement
Accessibility FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers
Design/code status Release notes Get support

Button

OverviewStyleGuidelinesCodeAccessibilityDemos
ImportingUsagerh-buttonImportingUsagerh-button

Importing

Add rh-button to your page with this import statement:

<script type="module">
  import '@rhds/elements/rh-button/rh-button.js';
</script>
Copy to Clipboard Wrap lines

To learn more about installing RHDS elements on your site using an import map read our getting started docs.

Usage 

<rh-button>Primary</rh-button>

<script type="module">
  import '@rhds/elements/rh-button/rh-button.js';
</script>
Copy to Clipboard Wrap lines

rh-button

A button is clickable text or an icon that triggers an action on the page or in the background. Depending on the action, content, and hierarchy, a button can be used on its own or grouped with other buttons.

Slots 2
Slot Name Description
icon

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

Contains button text
Attributes 9
Attribute DOM Property Description Type Default
disabled disabled

Disables the button

 
boolean
 
false
type type

button type

 
'button' | 'submit' | 'reset' | undefined
 
unknown
label label

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

 
string | undefined
 
unknown
value value

Form value for the button

 
string | undefined
 
unknown
name name

Form name for the button

 
string | undefined
 
unknown
icon icon

Shorthand for the icon slot, the value is icon name

 
IconNameFor<IconSetName> | undefined
 
unknown
icon-set iconSet

Icon set for the icon property - 'ui' by default

 
IconSetName | undefined
 
unknown
variant 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 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 32
Token Copy
--rh-border-radius-default
--rh-border-width-md
--rh-border-width-sm
--rh-color-blue-70
--rh-color-border-strong
--rh-color-gray-40
--rh-color-gray-90
--rh-color-icon-secondary
--rh-color-icon-secondary-on-dark
--rh-color-interactive-primary-default
--rh-color-interactive-primary-default-on-light
--rh-color-interactive-primary-hover-on-dark
--rh-color-interactive-primary-hover-on-light
--rh-color-red-30
--rh-color-red-60
--rh-color-surface-dark
--rh-color-surface-light
--rh-color-text-primary
--rh-color-text-primary-on-dark
--rh-color-text-primary-on-light
--rh-color-text-secondary
--rh-color-text-secondary-on-light
--rh-font-size-body-text-md
--rh-font-weight-body-text-regular
--rh-length-4xl
--rh-length-4xs
--rh-length-lg
--rh-line-height-body-text
--rh-opacity-50
--rh-opacity-80
--rh-space-lg
--rh-space-sm
Edit this page on GitHub
© 2021-2025 Red Hat, Inc. Deploys by Netlify