Skip to content

Components / Tab

Tab

Tabs allow users to quickly move between a small number of equally important views. Use tabs to organize content at a high level.

Structure

Elements

  1. Container
  2. Active text label
  3. Inactive text label
  4. Tab item
  5. Active tab indicator
  6. Active icon
  7. Inactive icon

Behavior

Don't
Don't display more than one active tab at a time.

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
bodyTextPrimaryColor

Dark text color used for primary content in layouts

#071523FF
bodyTextSecondaryColor

Medium dark text color used for secondary or muted content in layouts

#64707DFF
linkButtonFocusedColor

Background focused states

#2A73A81A
linkButtonPressedColor

Background pressed states

#2A73A833
linkButtonTextColor

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

#2A73A8FF
© 2021 Jack Henry & Associates, Inc. Trademark notice
Version 0.7.0. Last updated March 23, 2021.