Tabs

Tabs organize content and allow users to switch between different views.

When to use

Sectioning content

Use tabs to show users alternate views within the same group of context

Sectioning content

Use tabs to show users alternate views within the same group of context

Quick access

Tabs allow users to navigate through different content without multiple steps

Quick access

Tabs allow users to navigate through different content without multiple steps

Save space

Use tabs to save space and allow more content to be shown in a small space

Save space

Use tabs to save space and allow more content to be shown in a small space

When to avoid

Stepped or sequential content

Avoid using tabs with sequential names that don’t give context to content, instead consider using a stepper if the user needs to be guided through content

Stepped or sequential content

Avoid using tabs with sequential names that don’t give context to content, instead consider using a stepper if the user needs to be guided through content

Navigation

As tabs are used to navigate within the same context, avoid using tabs as a form of navigation to different areas

Navigation

As tabs are used to navigate within the same context, avoid using tabs as a form of navigation to different areas

Specifications

States

Selected

This state is applied to the active tab, indicating the content pane that is currently visible to the user. Only one tab can be in the selected state at a time.

Unselected

This state is applied to all other tabs that are not currently active. These tabs are ready to be activated but are not currently displaying their associated content.

Selected

This state is applied to the active tab, indicating the content pane that is currently visible to the user. Only one tab can be in the selected state at a time.

Unselected

This state is applied to all other tabs that are not currently active. These tabs are ready to be activated but are not currently displaying their associated content.

Selected

This state is applied to the active tab, indicating the content pane that is currently visible to the user. Only one tab can be in the selected state at a time.

Unselected

This state is applied to all other tabs that are not currently active. These tabs are ready to be activated but are not currently displaying their associated content.

Selected

This state is applied to the active tab, indicating the content pane that is currently visible to the user. Only one tab can be in the selected state at a time.

Unselected

This state is applied to all other tabs that are not currently active. These tabs are ready to be activated but are not currently displaying their associated content.

Tab styles

Default

This standard style is characterized by an active indicator, a colored line, that highlights the selected tab.

Outline

Emulates a physical folder system where the selected tab looses its bottom border to connect it with content below.

Pills

The pills style encloses tabs in a rounded container. The selected tab is highlighted with a filled background, giving it a button-like look.

Orientation

Horizontal

Use horizontal tabs for top-level navigation, to save vertical screen space, and when all tab labels are concise.

Vertical

Use vertical tabs for secondary navigation, particularly for complex settings or deep content hierarchies.

Horizontal

Use horizontal tabs for top-level navigation, to save vertical screen space, and when all tab labels are concise.

Vertical

Use vertical tabs for secondary navigation, particularly for complex settings or deep content hierarchies.

Horizontal

Use horizontal tabs for top-level navigation, to save vertical screen space, and when all tab labels are concise.

Vertical

Use vertical tabs for secondary navigation, particularly for complex settings or deep content hierarchies.

Horizontal

Use horizontal tabs for top-level navigation, to save vertical screen space, and when all tab labels are concise.

Vertical

Use vertical tabs for secondary navigation, particularly for complex settings or deep content hierarchies.

Anatomy

Leading icon

Optional and can be included in a tab to provide additional visual context for the label.

Label

The clickable title that describes the content of its corresponding panel.

Counter

A counter is a small number next to a tab's label. It provides a quick summary of items associated with that tab.

Active indicator

A visual marker, that clearly highlights the currently selected tab. Varies depending on the tab variant (Default, pills or outline).

Group container

The tab group container defines the full width of the tab set. The orientation prop indicates a horizontal or vertical tab structure. The position prop alters the desired alignment or spacing of the tab group.

Value

Tabs