Skip to main content Red Hat Design System logo Contribute on Github v2.0.0 Home
About About the design systemHow we buildRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridPersonalization patternsSpacingTypography
Tokens Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries
Elements All elements Accordion Alert Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Call to action Card Code block Dialog Footer Health index Icon Navigation (primary)Planned Navigation (secondary) Pagination PopoverPlanned Progress stepsPlanned Site status Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Patterns All patternsAnnouncementCardDisclosureFilterFormLinkLink with iconLogo wallSearch barSkip navigationSticky bannerSticky cardTabsTileVideo thumbnail
Accessibility FundamentalsContentDesignDevelopmentContributorsQa and testingAssistive technologiesResources
Design/code status Release notes Get support

Button

Overview Style Guidelines Code Demos Accessibility
  1. Installation
  2. Usage
  3. rh-button
  1. Installation
  2. Usage
  3. rh-button

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