Skip to main content Red Hat Design System logo Contribute on Github

Button

Overview Style Guidelines Code Demos Accessibility

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

Theme

Buttons are available in both light and dark themes.

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
Example Token Description
6 --rh-space-sm 6px spacer
8 --rh-space-md 8px spacer
16 --rh-space-lg 16px spacer

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
© 2021-2024 Red Hat, Inc. Deploys by Netlify