Tab Component

Basic Tabs

Standard horizontal tab navigation with underline indicator

<div class="tab-group">
  <div class="tab-list" role="tablist" aria-label="Product information">
    <button class="tab" role="tab" aria-selected="true"
            aria-controls="panel-1" id="tab-1">
      Overview
    </button>
    <button class="tab" role="tab" aria-selected="false"
            aria-controls="panel-2" id="tab-2" tabindex="-1">
      Features
    </button>
  </div>
  <div class="tab-panels">
    <div class="tab-panel" role="tabpanel"
         id="panel-1" aria-labelledby="tab-1" aria-hidden="false">
      Overview content...
    </div>
    <div class="tab-panel" role="tabpanel"
         id="panel-2" aria-labelledby="tab-2" aria-hidden="true">
      Features content...
    </div>
  </div>
</div>

Tabs with Icons

Icons provide visual recognition and scan-ability

<button class="tab" role="tab" aria-selected="true"
        aria-controls="panel-1" id="tab-1">
  <svg class="tab-icon" viewBox="0 0 16 16" fill="currentColor">
    <!-- icon path -->
  </svg>
  Profile
</button>

Full Width Tabs

Tabs stretch to fill available width

<div class="tab-list tab-list--full-width" role="tablist">
  <button class="tab" role="tab">Grid View</button>
  <button class="tab" role="tab">List View</button>
  <button class="tab" role="tab">Table View</button>
</div>

Usage Guidelines

• Navigation: Use tabs to organize related content into separate views within the same context
• Button Element: Always use <button> for tab triggers (not links or divs)
• Active State: Exactly one tab must be active at all times
• Content Relationship: Tab content should be closely related (settings sections, product details)
• Tab Count: Keep 3-7 tabs; use different navigation pattern for more options
• Icons: Use icons sparingly and only when they add clear meaning
• Full Width: Use full-width variant when you have 2-4 tabs of similar label length

Accessibility Notes

• ARIA Roles: Use role="tablist" on container, role="tab" on buttons, role="tabpanel" on content
• aria-selected: Set to "true" for active tab, "false" for inactive tabs
• aria-controls: Tab button must reference its panel via ID
• aria-hidden: Set to "false" for visible panel, "true" for hidden panels
• tabindex: Active tab has tabindex="0", inactive tabs have tabindex="-1"
• Keyboard Navigation:
  • Tab: Moves focus into/out of tab list
  • Arrow Left/Right: Navigate between tabs
  • Home: Jump to first tab
  • End: Jump to last tab
• Focus Visible: Purple outline appears on keyboard focus
• Labels: Provide aria-label on tablist to describe the group

Design System Specs