Atom

Tabs

Navigation component for switching between different views or sections within a container.

Overview

The Tabs component provides horizontal navigation for switching between different content sections. It's commonly used for organizing related content within a single view without navigation away from the page.

Props

Prop Type Default Description
items TabItem[] - Array of tab items to render
value string - Currently selected tab value
onChange (value: string) => void - Callback when tab selection changes
size 'sm' | 'md' | 'lg' 'md' Size variant
fullWidth boolean false Whether tabs should take full width

TabItem Interface

Property Type Description
value string Unique identifier for the tab
label string Label text to display
icon ReactNode Optional icon before label
disabled boolean Whether the tab is disabled

Variants

Sizes

Three size options for different contexts.

Small
Medium
Large
 
<Tabs items={items} value={value} onChange={setValue} size="sm" />
<Tabs items={items} value={value} onChange={setValue} size="md" />
<Tabs items={items} value={value} onChange={setValue} size="lg" />

Full Width

Tabs that stretch to fill their container.

 
<Tabs items={items} value={value} onChange={setValue} fullWidth />

Examples

With Icons

Tabs can include icons for better visual recognition.

 
const items = [
  { value: 'home', label: 'Home', icon: <Home size={16} /> },
  { value: 'profile', label: 'Profile', icon: <User size={16} /> },
  { value: 'settings', label: 'Settings', icon: <Settings size={16} /> },
];

<Tabs items={items} value={value} onChange={setValue} />

Disabled Tab

Individual tabs can be disabled while others remain interactive.

 
const items = [
  { value: 'active', label: 'Active' },
  { value: 'pending', label: 'Pending' },
  { value: 'disabled', label: 'Disabled', disabled: true },
];

Accessibility

  • Role: Uses "tablist" role with proper "tab" roles for buttons.
  • ARIA: aria-selected indicates active tab, aria-disabled for disabled tabs.
  • Keyboard Support: Tab key navigates between tabs, Enter/Space activates.
  • Focus Management: Visible focus ring on keyboard navigation.

Best Practices

  • Use tabs for content that is closely related but distinct
  • Keep tab labels short and descriptive
  • Consider mobile screens - tabs may need horizontal scrolling
  • Don't use tabs when navigation between sections is critical to user flow