Tabs

Tabs organize content into multiple sections and allow users to navigate between them.

Home

Files

Settings

orientation

keyboardActivation

isDisabled

Example

Tabs.tsx

Tabs.css

theme.css

Example

Tabs.tsx

Tabs.css

theme.css

import {Tabs, TabList, Tab, TabPanel} from 'react-aria-components';
import Home from '@react-spectrum/s2/illustrations/gradient/generic2/Home';
import Folder from '@react-spectrum/s2/illustrations/gradient/generic2/FolderOpen';
import Search from '@react-spectrum/s2/illustrations/gradient/generic2/Search';
import Settings from '@react-spectrum/s2/illustrations/gradient/generic1/GearSetting';

<Tabs>
  <TabList aria-label="Tabs">
    <Tab id="home">Home</Tab>
    <Tab id="files">Files</Tab>
    <Tab id="search">Search</Tab>
    <Tab id="settings">Settings</Tab>
  </TabList>
  <TabPanel id="home" style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
    <Home />
  </TabPanel>
  <TabPanel id="files" style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
    <Folder />
  </TabPanel>
  <TabPanel id="search" style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
    <Search />
  </TabPanel>
  <TabPanel id="settings" style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
    <Settings />
  </TabPanel>
</Tabs>

Tabs

Anatomy