TABS

When to Use

Example: product detail — info tabs

  • Organizing related content into switchable views without page navigation
  • Reducing page length by grouping content into logical sections
  • Providing tabbed navigation within a card, panel, or page section

Usage Guidelines

DO

Keep tab labels short (1–2 words). Use Segmented for primary navigation, Underline for secondary contexts

Don’t

Don't nest tabs inside tabs. Don't exceed the recommended tab count (5 for Segmented, 7 for Underline)

Accessibility

  • Keyboard: Tab to focus, Arrow keys to navigate, Enter/Space to select
  • role="tablist" on container, role="tab" on triggers, role="tabpanel" on content
  • aria-selected on active tab, aria-controls linking tab to panel