Skip to main content
🏠ComponentsTabs

Tabs

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

Basic tabs​

A basic example with three tabs.

<Tabs>
  <Tab active label="Item 1"></Tab>
  <Tab label="Item 2"></Tab>
  <Tab label="Item 3"></Tab>
</Tabs>

Sizes​

Set size attribute to small or medium to style tabs size. By default, tabs have size medium.

<Tabs size="small">
  <Tab active label="Item 1"></Tab>
  <Tab label="Item 2"></Tab>
  <Tab label="Item 3"></Tab>
</Tabs>
<Tabs size="medium">
  <Tab active label="Item 1"></Tab>
  <Tab label="Item 2"></Tab>
  <Tab label="Item 3"></Tab>
</Tabs>

States​

Active State​

Add active attribute to a tab to style it as active.

<Tabs>
  <Tab active label="Item 1"></Tab>
  <Tab label="Item 2"></Tab>
  <Tab label="Item 3"></Tab>
</Tabs>

Disabled State​

Add disabled attribute to tab to style it as disabled.

<Tabs>
  <Tab disabled label="Item 1"></Tab>
  <Tab label="Item 2"></Tab>
  <Tab label="Item 3"></Tab>
</Tabs>

Divider​

By default, tabs has a divider. Alternatively, tabs can be used without a divider by setting divider to false.

<Tabs divider={false}>
  <Tab label="Item 1"></Tab>
  <Tab label="Item 2"></Tab>
  <Tab label="Item 3"></Tab>
</Tabs>

Layout​

  • fullWidth attribute if you want the tabs container to take up the whole width.
  • fullHeight attribute if you want the tabs container to take up the whole height.

Fluid Tabs​

Add fullWidth and fluid to Tabs if you want set equal tabs widths when the tabs wrapper takes up the whole width available.

<Tabs fullWidth fluid>
  <Tab active label="Item 1"></Tab>
  <Tab label="Item 2"></Tab>
  <Tab label="Item 3"></Tab>
</Tabs>

Alignment​

Tabs alignment can be set by setting alignment attribute to left, center, right.

Left alignment​

<Tabs fullWidth alignment="left">
  <Tab active label="Item 1"></Tab>
  <Tab label="Item 2"></Tab>
  <Tab label="Item 3"></Tab>
</Tabs>

Center alignment​

<Tabs fullWidth alignment="center">
  <Tab active label="Item 1"></Tab>
  <Tab label="Item 2"></Tab>
  <Tab label="Item 3"></Tab>
</Tabs>

Right alignment​

<Tabs fullWidth alignment="right">
  <Tab active label="Item 1"></Tab>
  <Tab label="Item 2"></Tab>
  <Tab label="Item 3"></Tab>
</Tabs>

Scrollable tabs​

Use scrollHorizontally to allow horizontal scrolling if needed.

<Tabs scrollHorizontally fullWidth>
  <Tab active label="Item 1"></Tab>
  <Tab label="Item 2"></Tab>
  <Tab label="Item 3"></Tab>
  <Tab label="Item 4"></Tab>
  <Tab label="Item 5"></Tab>
  <Tab label="Item 6"></Tab>
  <Tab label="Item 7"></Tab>
</Tabs>

Icons​

Tab labels may be either all icons or all text.

<Tabs>
  <Tab active icon={<Icon icon="settings" />}></Tab>
  <Tab icon={<Icon icon="account_circle" />}></Tab>
  <Tab icon={<Icon icon="face" />}></Tab>
</Tabs>
<Tabs>
  <Tab active icon={<Icon icon="settings" />} label="Item 1"></Tab>
  <Tab icon={<Icon icon="account_circle" />} label="Item 2"></Tab>
  <Tab icon={<Icon icon="face" />} label="Item 3"></Tab>
</Tabs>

Icon position​

By default, the icon is positioned at the start of a tab. Other supported position is end.

<Tabs>
  <Tab active icon={<Icon icon="settings" />} label="Item 1" iconPosition="start"></Tab>
  <Tab icon={<Icon icon="account_circle" />} label="Item 2" iconPosition="end"></Tab>
  <Tab icon={<Icon icon="face" />} label="Item 3"></Tab>
</Tabs>

Vertical Tab​

Set tabItemDirection attribute to horizontal or vertical to allow horizontal/vertical tab layout.

<Tabs tabItemDirection="vertical">
  <Tab active icon={<Icon icon="settings" />} label="Item 1"></Tab>
  <Tab icon={<Icon icon="account_circle" />} label="Item 2"></Tab>
  <Tab icon={<Icon icon="face" />} label="Item 3"></Tab>
</Tabs>

Customization​

A Tab can also take any content in their slot.

<Tabs>
  <Tab active>
    <Icon icon={<Icon icon="settings" />} />
    <Typography classes="text-green-500">Item 1</Typography>
  </Tab>
  <Tab>
    <Icon icon={<Icon icon="account_circle" />} />
    <Typography classes="text-red-500">Item 2</Typography>
  </Tab>
  <Tab>
    <Icon icon={<Icon icon="face" />} />
    <Typography classes="text-primary-500">Item 3</Typography>
  </Tab>
</Tabs>

API​

Tabs​

Loading API documentation...

Tab​

Loading API documentation...