Tabs

The tab component is a navigational element used to switch between different sections of content within a page. It consists of a set of tabs, each representing a different section of content.

Anatomy

The tab component consists of the following elements:

  1. Active tab - including text and indicator
  2. Inactive tab
  3. Component separator if required.
Tab anatomy

States

The tab component has two states:

  • Active: When a tab is currently selected
  • Inactive: When a tab is not currently selected

Best Practices

Here are some best practices to keep in mind when designing with the tab component:

Do:

  • Keep the number of tabs to a minimum. Too many tabs can overwhelm users and make it difficult to navigate.
  • Use clear and concise labels for each tab.
  • Provide visual feedback when a tab is selected.

Don't:

  • Use the tab component for primary navigation. It is best suited for secondary or tertiary navigation within a page.
  • Use tabs for content that is unrelated to each other. Tabs should represent different sections of related content.

Accessibility Information

When designing with the tab component, it is important to ensure that it is accessible to all users. Here are some accessibility considerations to keep in mind:

  • Provide descriptive labels for each tab.
  • Ensure that the active tab is clearly indicated, both visually and programmatically.