Skip to main content

Tab

Component
Live

The Tabs component allows users to switch between different panels of content.

FigmaCode

Usage​

Tabs allow users to move between related content sections at the same level of hierarchy. All Tab labels are visible for the user to scan an explore if relevant, with the first tab active on page load.

Installation​

Install

yarn add @iag/chroma-react-ui.components

Import

import { Tab } from "@iag/chroma-react-ui.components";

When to use​

Use Tabs for organising related content into sections a user can switch between quickly. Tabs are useful for breaking content into sections that a user would benefit from referencing between while maintaining overall context, instead of having to navigate to different pages.

When to avoid​

Avoid using Tabs when content is very short or where important information can be hidden. In these instances content would be better displayed as standard content on that page. Also avoid when content is very long, consider breaking content onto separate pages. Do not use tabs as a page layout component.

Do

  • Do use short, easily scannable, descriptive Tab labels.
  • Do ensure each tab contains distinct content.

Don't

  • Don't use Tabs within Tabs.
  • Don't display disabled Tabs.
  • Don't hide important information in Tabs.