Tabs
A set of layered sections of content, known as tab panels, that are displayed one at a time.
Last updated: March 11, 2026
This page now includes tab patterns for account settings, dashboards, inboxes, cards, mobile navigation, loading states, and dense data views.
Basic Tabs
A standard account settings layout with icon labels.
Icon Only Tabs
Compact icon tabs for toolbars and dashboards.
Tabs With Badge
Inbox-style tabs with message counts and secondary status badges.
Vertical Tabs
Sidebar-style tab navigation for settings and profile pages.
Pill Tabs
Rounded filter tabs for search and content grouping.
Underline Tabs
Borderless tabs with a focused underline treatment.
Full Width Tabs
Equal-width tabs for balanced file and media views.
Card Tabs
Card-shaped tab selectors for media or feature categories.
Scrollable Tabs
Horizontally scrollable tabs for long mobile tab lists.
Tabs With Description
Tabs with short helper descriptions inside the trigger.
Colored Tabs
State tabs with strong active colors for dashboards.
Bordered Tabs
Boxed tabs with segmented dividers and a contained panel.
Tabs With Dot
Live-state tabs with an animated activity indicator.
Disabled Tabs
A settings group that includes unavailable states.
Stacked Icon Tabs
Mobile-friendly tabs with icons stacked above labels.
Tabs With Loading
Async-looking tabs that simulate panel loading between switches.
Floating Tabs
Detached tab controls paired with a separate content card.
Compact Tabs
Dense, chart-style tabs for time-range switching.
Tabs With Content Card
Tabs that reveal more structured card-style panel content.
Alex Johnson
alex@example.com
Member since Jan 2023 · Pro plan
Bottom Nav Tabs
Bottom navigation tabs for mobile app shells.