Tabs

Tabs are used to organize related content. It allows users to navigate between groups of information that appear within the same context.

The tab component consists of two distinct zones: selected and unselected.

There are always at least two tabs, and one is selected by default. Icons are optional.

Anatomy of line tabs

  1. Label.
    - Selected using typography-paragraph-small with fill color-brand-400
    - Unselected using typography-paragraph-small with fill color-grey-300
  2. Indicator. Using color-brand-400 fills the whole container.

Component Health

Healthy
Show details
Healthy
Published: August 09, 2024
Updated: March 06, 2025
Figma component
Open in Figma
Status
Healthy
Repository
Open link
Comment
-