Tab Bar

🧭 When to Use a Tab Bar

Use a Tab Bar when:

• Content is grouped by category or mode (e.g., “Overview”, “Activity”, “Settings”)

• Switching tabs updates part of the view without changing the URL

• You need a fast and clear way to toggle between sections

Avoid using Tab Bars for navigation across entirely different pages — use Top Nav or Sidebar Nav instead.

🧩 Tab Items

Tab Items are the interactive elements within a Tab Bar. Each item represents a panel or section and supports text, optional icons, and optional badges.

🎯 Tab Item States

Each Tab Item supports the following interaction statuses:

• Default – Neutral, inactive tab

• Hover – Visual cue like underline or color shift when hovered

• Focus – Visible outline for keyboard navigation

• Disabled – Muted appearance; not interactive

• Selected – Active state; reflects the currently visible panel

• Unselected – All other tabs not currently active

🎨 Types

• Underline – Selected tab is marked with a colored underline

• Filled – Selected tab has a filled background (pill-style or rectangle)
  These types are determined at the Tab Bar level and apply to all items for consistency.

📏 Sizes

• Medium (md) – Standard desktop/tab default

• Large (lg) – Use in mobile, hero areas, or content with more visual emphasis

📐 Width Variants

• Default Width – The tab size adapts to its content

• Wide – Equal-width tabs that stretch across the Tab Bar; useful for 2–4 tab layouts or touch interfaces

These can be toggled per instance or set via layout tokens in Figma.

🧠 Modifiers

Badge Modifier
Tab Items can optionally display a Badge (e.g., for notifications, unread counts).

• Use badges for emphasis: "Messages (3)", "Updates", "Requests (1)"

• Badges are controlled through a layer property and can be shown or hidden as needed

Icon Modifier
Icons can be displayed to the left of the label.

• Icons help reinforce meaning and are great for mobile UIs or condensed layouts

• The icon layer can be toggled using a layer property

• When hidden, spacing adjusts automatically to maintain layout consistency

🧩 Tab Bar (Composite Component)

The Tab Bar combines multiple Tab Items in a horizontal row. You can switch between:

• Underline Tabs – Lightweight style using a simple underline for selection

• Filled Tabs – Stronger visual focus with a background fill on selected tab

The Tab Bar supports:

• Medium and large sizing

• Default or wide widths

• Scrollable vs fixed layouts

• The ability to show/hide additional Tab Items via layer visibility (ideal for prototypes or variant previews)

This structure gives full control over responsive behaviors, spacing, and visibility.

♿ Accessibility Considerations

From a design perspective:

• Ensure selected and focus states are clearly visible

• Maintain a minimum 44px target size per tab for touch usability

• Use visual contrast and hierarchy to indicate active tabs

From a code perspective (if implemented):

• Use role="tablist" on the Tab Bar

• Use role="tab" on each Tab Item

• Add aria-selected="true" to the selected tab

• Link each tab to its panel using aria-controls and id

• Keyboard navigation should support Arrow Left/Right and Home/End

✅ Best Practices

• Use short, scannable labels like “Overview”, “Activity”, “Files”

• Avoid mixing visual styles (e.g., some tabs filled, others underlined) within the same bar

• Only show badges when they offer real value—avoid notification fatigue

• Collapse or scroll tabs gracefully on smaller screens; never wrap to multiple rows