Skip to main content Home
About About the Design SystemRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridIconographyInteractionsSpacingTypography
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 PatternsCardTabsFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTile
Personalization All Personalization PatternsAnnouncement
Accessibility FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers
Design/code status Release notes Get support

Button

OverviewStyleGuidelinesCodeAccessibilityDemos
OverviewStatusWhen to useStatus checklistOverviewStatusWhen to useStatus checklist

Overview

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.

import '@rhds/elements/rh-button/rh-button.js';
<rh-button>Primary</rh-button>

Disables the button

button type

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

Form value for the button

Form name for the button

Shorthand for the icon slot, the value is icon name

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

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.

Use danger buttons for actions a user can take that are potentially destructive or difficult/impossible to undo, like deleting or removing user data.

Status

When to use

  • When you need to allow users to interact with pages in a variety of ways
  • When you need to communicate actions users can take
  • When you need to draw attention to the highest priority action
Image of Danger, Primary, Secondary, Tertiary, and Link buttons in the first row and Play and Close buttons in the second row

Status checklist

© 2025 Red Hat Deploys by Netlify