atom

Tabs

Content 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
`orientation`	`'vertical' \| 'horizontal'`	`'horizontal'`	Direction of tabs
`fullWidth`	`boolean`	`false`	Whether tabs should take full width
`fullHeight`	`boolean`	`false`	Whether tabs should take full height
`testID`	`string`	-	Test ID for testing purposes

TabItem Interface

Property	Type	Description
`value`	`string`	Unique identifier for the tab
`label`	`string`	Label text to display
`icon`	`(props: { color: string }) => ReactNode`	Optional render function that receives a theme-resolved color and returns the icon element
`disabled`	`boolean`	Whether the tab is disabled

Variants

Sizes

Three size options for different contexts.

<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: (props: { color: string }) => <Home {...props} size={16} />,
  },
  {
    value: 'profile',
    label: 'Profile',
    icon: (props: { color: string }) => <User {...props} size={16} />,
  },
  {
    value: 'settings',
    label: 'Settings',
    icon: (props: { color: string }) => <Settings {...props} 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 },
];

Vertical Tabs

Tabs can be horizontal (default) or vertical.

<Tabs items={items} value={value} onChange={setValue} orientation="vertical" />

Accessibility

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