Tabs
You might say
There's too much content here. Split it into tabs so people can switch views with a click.
Switch between a few peer sections on the same pageTabs work for sections such as Overview, Settings, and Logs under the same object. Keep the active tab obvious and decide whether unfinished input remains when switching. If the sections are really separate destinations, use navigation instead.
When to use it
- Sections of one recordAllAwaiting paymentCompleted
- Switch between related viewsOverviewSettingsLogs
- Organize a compact settings pageCommentsHistorySaveNo navigation needed—click to switch content.
- Separate content that shares the same contextAllIn progressFinish
When NOT to use it
- Use tabs for the product's main navigation1Enter information2Confirm order3Complete payment
- Create so many tabs that they no longer fitTabs that do not fit disappear.
- Hide required steps behind optional-looking tabsTwo columns for side-by-side comparison.
- Discard unsaved input silently when switchingBasic informationAdvanced settingsUnsaved changes…Switch tabs and lose what you entered.
Anatomy
6 projects in progress...
Container for the whole tab bar and its panel
Click to switch — keep the label short
A highlight and underline show users which tab is active
The content area for the current tab
Variants
Line
All 24 projects
The default — a light underline that never upstages the content
Card
AllActiveDone
When you want the tabs to feel like separate blocks of their own
Capsule
AllActiveDone
A lighter fit for tight spots like toolbars
Typical use cases
Project detail
Homepage RedesignActive
Design Guidelines DocDone
Mobile AdaptationNot Started
Account settings
Settings
AlexLinked Emailyou@example.com
Analytics views
vibe-ui-guideRunning
14:32:05 build completed in 3.2s
14:32:06 deploying to production…
14:32:09 ✓ deploy success
Code and preview
Visits
12,480
↑ 18%
New Users
326
↑ 6%
Conversion
4.2%
↓ 0.8%
Further reading