Developer mode
Opens components on the React tab by default.
Your bookmarks

Tabs

Separates content into groups within a single context.

When you have a lot of content, showing it all at once can overwhelm users. When you have similar groups of content, separate them into tabs so users get only the content they need.

Tabs can split tasks into manageable chunks. Use them to divide large lists into smaller categories. They can help wherever you have related views.

Component status

Figma
Released
Web (React)
Planned
iOS (Swift)
n/a
Android (Kotlin)
n/a
Docs
Released
Label: indicates tab content and works best when short; indicator: shows whether or not the tab is active.

Guidelines

Have similar content

Tabs make sense when the content they contain is related. That includes categories within a list, one specific task, and parts of a user profile.

Don’t use tabs when the content isn’t related. Make sure it all makes sense within the overall context.

Everything necessary in one tab

While it’s important the tabs are related, it’s also key for their content to be separate. Users don’t want to be switching back and forth between tabs to get tasks done.

Make sure everything necessary to complete a single task is contained within one tab.

Make content clear

Users want to know what each tab contains before they switch to it.

Use short, clear names to set clear expectations. Aim for a single word when possible.

My profile, My trips, Preferences
My trips, Upcoming, Completed
Guidelines, React, iOS, Android
Your user profile, Trips, Settings for your account
My trips, Trips you have planned, Trips you have taken
Some general thoughts, Specifics for React, iOS implementation, How it’s done in Android

Limit the number of tabs

Tabs help to keep a lot of information in one context without taking up too much space. But having too many tabs increases clutter and can be overwhelming. 

Try to have no more than 6 tabs at once to make the organization clear to users. If you have more categories, consider another component, like a drawer.

Related components

NavigationBar

Tabs organize content within a single screen. For navigation across screens, consider a navigation bar.