Tabs

A set of layered sections of content that display one panel at a time.
1<Flex direction="row" gap="large" style={{ width: "100%", fontSize: "12px" }}>
2  <Tabs defaultValue="tab-one">
3    <Tabs.List>
4      <Tabs.Tab value="tab-one" leadingIcon={<Info />}>
5        Hoisting
6      </Tabs.Tab>
7      <Tabs.Tab value="tab-two">Hosting</Tabs.Tab>
8      <Tabs.Tab value="tab-three" leadingIcon={<Info />}>
9        Editor
10      </Tabs.Tab>
11      <Tabs.Tab value="tab-four">Billing</Tabs.Tab>
12      <Tabs.Tab value="tab-five">SEO</Tabs.Tab>
13    </Tabs.List>
14    <Tabs.Content value="tab-one">
15      <Text>General settings content</Text>

Usage

1import { Tabs } from "@raystack/apsara";

Tabs Props

Prop

Type

Tabs.List Props

Prop

Type

Tabs.Tab Props

Prop

Type

Tabs.Content Props

Prop

Type

Examples

Basic Usage

1<div style={{ width: "400px" }}>
2  <Tabs defaultValue="tab1">
3    <Tabs.List>
4      <Tabs.Tab value="tab1">Account</Tabs.Tab>
5      <Tabs.Tab value="tab2">Password</Tabs.Tab>
6      <Tabs.Tab value="tab3">Settings</Tabs.Tab>
7    </Tabs.List>
8    <Tabs.Content value="tab1">Account settings</Tabs.Content>
9    <Tabs.Content value="tab2">Password settings</Tabs.Content>
10    <Tabs.Content value="tab3">Other settings</Tabs.Content>
11  </Tabs>
12</div>

With Leading Icons

1<div style={{ width: "400px" }}>
2  <Tabs defaultValue="tab1">
3    <Tabs.List>
4      <Tabs.Tab value="tab1">Home</Tabs.Tab>
5      <Tabs.Tab value="tab2" leadingIcon={<Info />}>
6        Info
7      </Tabs.Tab>
8    </Tabs.List>
9    <Tabs.Content value="tab1">Home content</Tabs.Content>
10    <Tabs.Content value="tab2">Info content</Tabs.Content>
11  </Tabs>
12</div>

Disabled Tab

1<div style={{ width: "400px" }}>
2  <Tabs defaultValue="tab1">
3    <Tabs.List>
4      <Tabs.Tab value="tab1">Active</Tabs.Tab>
5      <Tabs.Tab value="tab2" disabled>
6        Disabled
7      </Tabs.Tab>
8    </Tabs.List>
9    <Tabs.Content value="tab1">Active tab content</Tabs.Content>
10    <Tabs.Content value="tab2">Disabled tab content</Tabs.Content>
11  </Tabs>
12</div>