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
StyleColor schemeConfigurationSpaceInteraction statesStyleColor schemeConfigurationSpaceInteraction states

Style

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.

Anatomy

Anatomy image of buttons with numbered annotations
  1. Text
  2. Container
  3. Border
  4. Text only
  5. Icon
  6. Icon background
  7. Icon only

Color scheme

Buttons are available for both light and dark color schemes.

Light and dark themes

Image of light theme Danger, Primary, Secondary, Tertiary, Link, Play, and Close buttons Image of dark theme Danger, Primary, Secondary, Tertiary, Link, Play, and Close buttons
Property Light theme Dark theme
Color - Danger button text #FFFFFF #151515
Color - Danger button surface #C9190B #FF542E
Color - Primary button text #FFFFFF #FFFFFF
Color - Primary button surface #0066CC #0066CC
Color - Secondary button text and border #0066CC #2B9AF3
Border width - Secondary button 1px 1px
Color - Tertiary button text and border #151515 #FFFFFF
Border width - Tertiary button 1px 1px
Color - Link button text #0066CC #2B9AF3
Color - Play button background #151515 #FFFFFF
Opacity - Play button background 50% 25%
Color - Close button #4D4D4D #C7C7C7

Configuration

All buttons with a container have the same height and border radius, but the width varies based on the amount of content. Buttons in a row are all horizontally centered. When a Play button is placed on an image, it is both horizontally and vertically centered and stays the same size no matter how big or small the image gets.

Image of buttons and various specs like border radius, height, icon size, width, alignment, placement, and more

Space

Space values are the same on all breakpoints for the following buttons. To see space values when buttons are grouped, go to the Guidelines page.

Helpful tip

Buttons include a custom 6px spacer, do not use it anywhere else.

 Image of Danger, Primary, Secondary, Tertiary, Link, and Close buttons with spacing values in between

Interaction states

Interaction states are visual representations used to communicate the status of an element or pattern.

Hover

Image of light theme button hover states Image of dark theme button hover states
Property Light theme Dark theme
Color - Danger button surface #A30000 #FF8266
Color - Primary button surface #004080 #004080
Border width - Secondary button 2px 2px
Border width - Tertiary button 2px 2px
Color - Link button text #004080 #73BCF7
Text decoration - Link button text Underline Underline
Opacity - Play button background 75% 50%
Color - Close button #151515 #FFFFFF

Focus

Helpful tip

The Focus state has the same styles as the Hover state.

 Image of light theme button focus states Image of dark theme button focus states
Property Light theme Dark theme
Color - focus ring #0066CC #73BCF7

Active

Helpful tip

The Active state has the same styles as the Hover state.

 Image of light theme button active states Image of dark theme button active states
Property Light theme Dark theme
Color - focus ring #0066CC #73BCF7
Edit this page on GitHub
© 2021-2025 Red Hat, Inc. Deploys by Netlify