Tabs

Tabs are interactive elements that organise content into separate sections or views.

Overview

The purpose of tabs is to simplify navigation and provide a clear organisation of content. They offer an intuitive way for users to switch between different sections or views within the same interface, reducing clutter and improving the user experience.

When a user clicks or taps on a tab, the corresponding content is displayed while hiding the content of other tabs. This allows users to switch between different sections of the interface without navigating to separate pages or screens.

A group of tabs that are horizontally stacked together.

Resources

We’re currently working on updating our Tabs documentation, please see the resources below.

Figma Web Component	Stable
Figma Web Documentation	Stable
Figma App Component	Stable
Figma App Documentation	Stable
Web Components	Planned
Vue [Fozzie]	Stable
React [Snacks]	Stable
iOS JustUI [UI Kit]	Stable
iOS PIE [SwiftUI]	Stable
Android PIE [Compose & Views]	TBC