Skip to main content Home About the Design SystemRoadmap OverviewDesignersDevelopers OverviewColorGridIconographyInteractionsSpacingTypography Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries 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 Menu dropdown Navigation link Navigation (primary) Navigation (secondary) Navigation (vertical) Pagination PopoverPlanned Progress stepper Scheme toggle Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed OverviewColor PalettesCustomizingDevelopers All PatternsAccordionCall to ActionCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile All Personalization PatternsAnnouncement FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers Design/code status Release notes Get support

Button

OverviewStyleGuidelinesCodeAccessibilityDemos
ImportingUsagerh-buttonUsage guidelinesAccessibilityImportingUsagerh-buttonUsage guidelinesAccessibility

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 Summary Description
icon

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

Contains button text
Note: [default] unnamed slots do not have a slot="name" attribute.
Attributes 9
Attribute DOM Property Description Type Default
disabled disabled

Disables the button

 
boolean
 
false
type type

button type

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

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

 
string
 
unknown
value value

Form value for the button

 
string
 
unknown
name name

Form name for the button

 
string
 
unknown
icon icon

Shorthand for the icon slot, the value is icon name

 
IconNameFor<IconSetName>
 
unknown
icon-set iconSet

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

 
IconSetName
 
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()

Programmatically moves focus to the button element.

This method focuses the internal button element, making it the active element on the page. Useful for managing focus flow after dynamic content changes or user interactions.

Usage guidelines

  • Use to direct user attention after completing an action
  • Helpful for accessibility when managing focus programmatically
  • Called automatically when the button is the target of a focus navigation
  • Can be used after modals close to return focus to a trigger button

Accessibility

  • When focus is moved programmatically, ensure users are aware of the change
  • Avoid moving focus unexpectedly as it can disorient users
  • Moving focus to a button should be deliberate and serve user needs
const button = document.querySelector('rh-button');
button.focus();
Events 0
None
CSS Shadow Parts 2
Part Name Summary Description
button

Internal button element
icon

Container for the icon slot
CSS Custom Properties 2
CSS Property Description Default
--rh-color-text-status-disabled —
--rh-color-status-disabled —
Design Tokens 37
Token Summary Copy
--rh-font-size-body-text-md
--rh-font-weight-body-text-regular
--rh-line-height-body-text
--rh-length-4xs
--rh-border-radius-default
--rh-space-sm
--rh-space-lg
--rh-color-interactive-primary-hover-on-light
--rh-color-interactive-primary-hover
--rh-color-text-primary-on-dark
--rh-color-text-primary-on-light
--rh-color-status-danger
--rh-color-border-status-danger
--rh-color-red-60
--rh-color-red-30
--rh-border-width-sm
--rh-color-text-primary
--rh-color-border-strong
--rh-border-width-md
--rh-color-blue-70
--rh-color-interactive-primary-hover-on-dark
--rh-color-icon-secondary
--rh-color-interactive-secondary-active
--rh-color-interactive-secondary-focus
--rh-color-interactive-secondary-hover
--rh-length-lg
--rh-opacity-50
--rh-color-interactive-primary-default
--rh-color-gray-90
--rh-opacity-80
--rh-length-4xl
--rh-color-icon-secondary-on-dark
--rh-color-icon-secondary-on-light
--rh-color-gray-50
--rh-color-gray-60
--rh-color-gray-30
--rh-color-gray-40
Edit this page on GitHub
© 2025 Red Hat Deploys by Netlify