Button group

Button groups push multiple buttons together to form a single component. These are a great alternative to tabs.

Structure

Elements

  1. Active button
  2. Enabled button
  3. Active text label
  4. Enabled text label

Behavior

States

Enabled
Focused
Pressed
Active
Disabled
  • Enabled
  • Focused
  • Pressed
  • Active
  • Disabled

Style

Style specifications are available to inspect via Abstract. The following link will take you to their web-based interface.

Inspect component

Theming

The following table lists the theme properties used to style this component and any variations as well as a sample value.

A full list of properties used within the design system—as well as general usage guidelines—is available on the Theme properties page.

Examples of each theme property may be referenced by clicking a property name in the “property” column.

Sample Property Sample value
linkButtonTextColor

Simple hyperlink like buttons with text that that is intended to display on primary or secondary content backgrounds

#2A73A8FF