# Tabs

Tabs organize related content into separate panels, displaying one section at a time.


## Overview

### Usage

Use tabs when content can be divided into distinct sections that belong to the same context and hierarchy level.

Examples:

- Account details, Transactions, and Documents
- Overview, Holdings, and Activity
- Personal information, Contact details, and Preferences



### Number of tabs

Tabs work best when the number of options is limited. As the number of tabs increases, they become harder to scan and compare. If many options are required, consider whether another pattern would better support the user's task. When tabs exceed the available width, the tab bar becomes horizontally scrollable.

In a mobile device it will have the same behaviour.

### Sizes

The tabs are available in large and small. Use the large default and the small variant only in contexts where you use other component in size small.

### Leading and trailing content

Tab items can include optional leading and trailing content. Use leading content, such as icons or avatars, to help identify a tab. Use trailing content, such as badges or counts, to provide additional context about the tab's content.

### Tabs vs. segmented control

Tabs and segmented controls may appear similar but serve different purposes.

Use tabs when switching between different content panels.

Examples:

- Overview, Transactions, and Documents
- Personal details, Contact details, and Security settings

Use segmented control when changing a setting, mode, filter, or representation of content.

Examples:

- List view or Grid view
- Week, Month, or Year
- Amount or Percentage

Think of tabs as organizing content into sections, while segmented controls change how content is displayed.

### Do's and don'ts


## UX Guidelines

### Writing UX text for tabs

### Tab labels

### Common tab labels in overviews