Tabs

Organize content into separate views.

Tabs organize content into separate views where only one view can be visible at a time. Use tabs to reduce visual clutter and make it easier to find content.

Source code

Theme

Storybook

Almond UI is a React component library that provides a set of accessible, reusable, and customizable components to help you build your next project.

Tone

Color

Size

Radius

Full width

import { Tabs } from '@almond-ui/core';

function App() {
  return (
    <Tabs defaultTab="item-1">
      <Tabs.List>
        <Tabs.Tab anchor="tab-1">
          Tab A
        </Tabs.Tab>
        <Tabs.Tab anchor="tab-2">
          Tab B
        </Tabs.Tab>
        <Tabs.Tab anchor="tab-3">
          Tab C
        </Tabs.Tab>
      </Tabs.List>
      
      <Tabs.Content anchor="tab-1">
        Content A
      </Tabs.Content>
      <Tabs.Content anchor="tab-2">
        Content B
      </Tabs.Content>
      <Tabs.Content anchor="tab-3">
        Content C
      </Tabs.Content>
    </Tabs>
  );
}

Import

Import the Tabs component using the following import statement.

import { Tabs } from '@almond-ui/core';

Tones & Colors

The Tabs component comes with two tones: line and pill.

The available color values, which are applied to the Tabs.Tab are: blue, red, green, yellow, purple, gray, dark and black.

Line

Content A

<View>
  <Tabs color="blue" tone="line" defaultTab="1">
    // ...
  </Tabs>
  <Tabs color="red" tone="line" defaultTab="1">
    // ...
  </Tabs>
  <Tabs color="green" tone="line" defaultTab="1">
    // ...
  </Tabs>
  <Tabs color="yellow" tone="line" defaultTab="1">
    // ...
  </Tabs>
  <Tabs color="purple" tone="line" defaultTab="1">
    // ...
  </Tabs>
  <Tabs color="gray" tone="line" defaultTab="1">
    // ...
  </Tabs>
  <Tabs color="dark" tone="line" defaultTab="1">
    // ...
  </Tabs>
  <Tabs color="black" tone="line" defaultTab="1">
    // ...
  </Tabs>
</View>

Pill

Content A

<View>
  <Tabs color="blue" tone="pill" defaultTab="1">
    // ...
  </Tabs>
  <Tabs color="red" tone="pill" defaultTab="1">
    // ...
  </Tabs>
  <Tabs color="green" tone="pill" defaultTab="1">
    // ...
  </Tabs>
  <Tabs color="yellow" tone="pill" defaultTab="1">
    // ...
  </Tabs>
  <Tabs color="purple" tone="pill" defaultTab="1">
    // ...
  </Tabs>
  <Tabs color="gray" tone="pill" defaultTab="1">
    // ...
  </Tabs>
  <Tabs color="dark" tone="pill" defaultTab="1">
    // ...
  </Tabs>
  <Tabs color="black" tone="pill" defaultTab="1">
    // ...
  </Tabs>
</View>

Sizes

Available size values are: xs, sm, md and lg.

Content A

<View>
  <Tabs size="sm" defaultTab="1">
    // ...
  </Tabs>
  <Tabs size="md" defaultTab="1">
    // ...
  </Tabs>
  <Tabs size="lg" defaultTab="1">
    // ...
  </Tabs>
</View>

Radiuses

Available radius values are: none, sm, base, md, lg and full.

Content A

<View>
  <Tabs tone="pill" radius="none" defaultTab="1">
    // ...
  </Tabs>
  <Tabs tone="pill" radius="sm" defaultTab="1">
    // ...
  </Tabs>
  <Tabs tone="pill" radius="base" defaultTab="1">
    // ...
  </Tabs>
  <Tabs tone="pill" radius="md" defaultTab="1">
    // ...
  </Tabs>
  <Tabs tone="pill" radius="lg" defaultTab="1">
    // ...
  </Tabs>
  <Tabs tone="pill" radius="full" defaultTab="1">
    // ...
  </Tabs>
</View>

Full width

The tabs list can be set to full width by setting the fullWidth prop to true.

Content A

<View>
  <Tabs fullWidth={true} defaultTab="1">
    // ...
  </Tabs>
</View>

Method

The Tabs component supports an unmount and a hide method. The unmount method will unmount the tab content when the tab is not active. The hide method will just hide the tab content when the tab is not active. If the state of the tab content needs to be preserved, the hide method should be used.

Hide

<View>
  <Tabs method="hide" defaultTab="1">
    // ...
  </Tabs>
</View>

Unmount

Change the following values and switch tabs back and forth

Option A

Option B

Option C

<View>
  <Tabs method="unmount" defaultTab="1">
    // ...
  </Tabs>
</View>

Ref

The Tabs.Tab component supports the ref prop, which allows for obtaining a reference to the associated underlying HTML element.

Tab 2 content

const App = () => {
  const ref1 = useRef<HTMLButtonElement>(null);
  const ref2 = useRef<HTMLButtonElement>(null);

  return (
    <div className="flex flex-col gap-2">
      <div className="flex gap-2">
        <Button
          onClick={() => {
            ref1.current?.click();
          }}
        >
          Activate Tab 1
        </Button>
        <Button
          onClick={() => {
            ref2.current?.click();
          }}
        >
          Activate Tab 2
        </Button>
      </div>

      <Tabs defaultTab="tab-2" fullWidth>
        <Tabs.List>
          <Tabs.Tab ref={ref1} anchor="tab-1">
            Tab 1
          </Tabs.Tab>
          <Tabs.Tab ref={ref2} anchor="tab-2">
            Tab 2
          </Tabs.Tab>
        </Tabs.List>

        <Tabs.Content anchor="tab-1">Tab 1 content</Tabs.Content>
        <Tabs.Content anchor="tab-2">Tab 2 content</Tabs.Content>
      </Tabs>
    </div>
  );
};

Examples

Content in Cards

Almond UI is a React component library that provides a set of accessible, reusable, and customizable components to help you build your next project.

const tabs = [
  // ...
];

<View>
  <Tabs defaultTab="tab-1">
    <Tabs.List>
      {tabs.map((tab) => (
        <Tabs.Tab
          key={`tab-${tab.anchor}`}
          anchor={tab.anchor}
          className="flex items-center gap-x-2"
        >
          {tab.icon} {tab.label}
        </Tabs.Tab>
      ))}
    </Tabs.List>

    {tabs.map((tab) => (
      <Tabs.Content key={`content-${tab.anchor}`} anchor={tab.anchor}>
        <Card>
          <Card.Body>{tab.content}</Card.Body>
        </Card>
      </Tabs.Content>
    ))}
  </Tabs>
</View>

Tabs in Card

Almond UI is a React component library that provides a set of accessible, reusable, and customizable components to help you build your next project.

const tabs = [
  // ...
];

<View>
  <Card shadow="base">
    <Card.Body className="p-0">
      <Tabs tone="line" fullWidth={true} defaultTab="tab-1">
        <Tabs.List className="m-0 p-0 bg-gray-100/50">
          {tabs.map((tab) => (
            <Tabs.Tab
              key={`tab-${tab.anchor}`}
              anchor={tab.anchor}
              className="py-3.5 flex items-center gap-x-2"
            >
              {tab.icon} {tab.label}
            </Tabs.Tab>
          ))}
        </Tabs.List>

        {tabs.map((tab) => (
          <Tabs.Content key={`content-${tab.anchor}`} anchor={tab.anchor} className="p-5">
            {tab.content}
          </Tabs.Content>
        ))}
      </Tabs>
    </Card.Body>
  </Card>
</View>

API Reference

Properties

Tabs

Prop	Type	Description	Default
color	`TabsColor`	Sets the tab color	`dark`
defaultTab	`string`	Sets the default tab	`undefined`
fullWidth	`boolean`	Sets the wrapper width to 100%	`false`
method	`TabsMethod`	Sets the hide method	`hide`
radius	`TabsRadius`	Sets the tab border radius	`none`
size	`TabsSize`	Sets the tab size	`md`
tone	`TabsTone`	Sets the tab tone	`line`

Tabs.Tab

Prop	Type	Description	Default
anchor	`string`	Sets the tab anchor value	`undefined`

Tabs.Content

Prop	Type	Description	Default
anchor	`string`	Sets the tab anchor value	`undefined`

Types

Tabs

type TabsColor = 'blue' | 'red' | 'green' | 'yellow' | 'purple' | 'gray' | 'dark' | 'black';

type TabsMethod = 'unmount' | 'hide';

type TabsRadius = 'none' | 'sm' | 'base' | 'md' | 'lg' | 'full';

type TabsSize = 'sm' | 'md' | 'lg';

type TabsTone = 'line' | 'pill';

Accessibility

The Tabs component adheres to the WAI-ARIA Tabs Pattern with manual activation.

Keyboard interactions

Key	Description
`Enter` or `Space`	Selects the focused tab
`Tab`	Moves focus to the next focusable tab
`Shift` + `Tab`	Moves focus to the previous focusable tab

Table Text