Menu


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

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

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
FontSize

With the prop fontSize you can customize the font size of the tabs

1import { TabGroup, Tabs } from 'dd360-ds'
2
3<TabGroup fontSize="xs">
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



API Reference
NameTypesDefault
"orientation"
vertical
horizontal
horizontal
"wideLine"
number
3.2
"variant"
primary
secondary
primary
"value"
number
0
"disabledText"
string
-
"fontSize"
base
xs
sm
lg
xl
-
"width"
number
-
"textColor"
string
-
"indicatorColor"
string
-
"className"
string
-
"childClassName"
string
-
"onChange"
function
-
"role"
string
-
"hidden"
boolean
-
Pagination