Navigation

Tabs
Storybook

Tabs make it easy to explore and switch between different views.

Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.

The TabGroup component must be used to wrap the tabs.

Imports

1import { TabGroup, Tabs } from 'dd360-ds'

Usage

1import { TabGroup, Tabs } from 'dd360-ds'
2
3<TabGroup variant="primary">
4    <Tab label="Element First" />
5    <Tab label="Element Second" />
6    <Tab label="Element Third" />
7    <Tab label="Element Disabled" disabled />
8</TabGroup>
9
10

Variant

With the prop variant you can customize the style of the tabs

PrimarySecondaryTertiary

1import { TabGroup, Tabs } from 'dd360-ds'
2
3<TabGroup variant="primary">
4    <Tab label="Element First" />
5    <Tab label="Element Second" />
6    <Tab label="Element Third" />
7    <Tab label="Element Disabled" disabled />
8</TabGroup>
9
10

Orientation

With the prop orientation you can customize the orientation of the tabs

HorizontalVertical

1import { TabGroup, Tabs } from 'dd360-ds'
2
3<TabGroup orientation="horizontal">
4    <Tab label="Element First" />
5    <Tab label="Element Second" />
6    <Tab label="Element Third" />
7    <Tab label="Element Disabled" disabled />
8</TabGroup>
9
10

TextColor

With the prop textColor you can customize the color of the first tab

1import { TabGroup, Tabs } from 'dd360-ds'
2
3<TabGroup textColor="rgba(49, 87, 240, 1)">
4    <Tab label="Element First" />
5    <Tab label="Element Second" />
6    <Tab label="Element Third" />
7    <Tab label="Element Disabled" disabled />
8</TabGroup>
9
10

Witdh

With the prop width you can customize the size of the TabGroup

1import { TabGroup, Tabs } from 'dd360-ds'
2
3<TabGroup width={400}>
4    <Tab label="Element First" />
5    <Tab label="Element Second" />
6    <Tab label="Element Third" />
7    <Tab label="Element Disabled" disabled />
8</TabGroup>
9
10

IndicatorColor

With the prop indicatorColor you can customize the color of the line below the active tab

1import { TabGroup,Tabs } from 'dd360-ds'
2
3<TabGroup indicatorColor="rgba(97, 39, 245, 0.8)">
4    <Tab label="Element First" />
5    <Tab label="Element Second" />
6    <Tab label="Element Third" />
7    <Tab label="Element Disabled" disabled />
8</TabGroup>
9
10

WideLine

With the prop wideLine you can customize the width of the line under the active tab

1import { TabGroup,Tabs } from 'dd360-ds'
2
3<TabGroup wideLine={8}>
4    <Tab label="Element First" />
5    <Tab label="Element Second" />
6    <Tab label="Element Third" />
7    <Tab label="Element Disabled" disabled />
8</TabGroup>
9
10

DisabledText

With the prop disabledText you can customize a message for disabled tabs

1import { TabGroup,Tabs } from 'dd360-ds'
2
3<TabGroup disabledText="Comming soon">
4    <Tab label="Element First" />
5    <Tab label="Element Second" />
6    <Tab label="Element Third" />
7    <Tab label="Element Disabled" disabled />
8</TabGroup>
9
10

Hidden

With the prop hidden you can hide the tab

1import { TabGroup,Tabs } from 'dd360-ds'
2
3<TabGroup>
4    <Tab label="Element First" />
5    <Tab label="Element Second" hidden />
6    <Tab label="Element Third" />
7    <Tab label="Element Disabled" disabled />
8</TabGroup>
9
10

Tab Custom

With the tertiary variant you can customize the appearance of the tabs. you can do so using the props: child ClassName, className, tabWidth textDisabledColor and others.

1import { Flex, TabGroup, Tabs } from 'dd360-ds'
2
3<Flex className="bg-gray-800 py-2">
4    <TabGroup
5        fontSize="xs"
6        indicatorColor="#3b82f6"
7        className="border-b border-gray-500"
8        childClassName="text-gray-400 py-2 hover:bg-gray-800"
9        tabWidth={106}
10        textColor="#ffffff"
11        textDisabledColor="#4b5563"
12        variant="tertiary"
13        wideLine={3}
14        >
15        <Tab label="Element First" />
16        <Tab label="Element Second" />
17        <Tab label="Element Third" />
18        <Tab label="Element Fourth" disabled />
19    </TabGroup>
20</Flex>
21
22

API Reference

Name	Types	Default
"orientation"	vertical horizontal	horizontal
"wideLine"	number	3.2
"variant"	primary secondary tertiary	primary
"value"	number	0
"disabledText"	string	-
"fontSize"	base xs sm lg xl	-
"width"	number	-
"tabWidth"	number	-
"tabMinWidth"	number	-
"textColor"	string	-
"textDisabledColor"	string	#D1D5DB
"indicatorColor"	string	-
"className"	string	-
"childClassName"	string	-
"onChange"	function	-
"role"	string	-
"hidden"	boolean	-

Pagination