Navigation

Tab

A set of tabs allows users to navigate between sections of the same interface.
1
import {Badge, BadgeType, TabConnected, TabContent, TabNavigation, TabPaneConnected} from '@coveord/plasma-react';
2
3
export default () => (
4
<>
5
<TabNavigation>
6
<TabConnected groupId="patate" id="tab2" title="Gyarados" tooltip="I have a toolip!" />
7
<TabConnected
8
groupId="patate"
9
id="tab13"
10
title="Mr. Mime"
11
tooltip="I have a badge!"
12
badge={<Badge label="Beta" isSmall type={BadgeType.Beta} extraClasses={['ml1']} />}
13
/>
14
<TabConnected groupId="patate" id="tab4" title="Rapidash" tooltip="I'm disabled" disabled />
15
</TabNavigation>
16
<TabContent>
17
<TabPaneConnected groupId="patate" id="tab2">
18
<div className="mod-header-padding mod-form-top-bottom-padding">Content of the second tab.</div>
19
</TabPaneConnected>
20
<TabPaneConnected groupId="patate" id="tab4">
21
<div className="mod-header-padding mod-form-top-bottom-padding">Content of the fourth tab.</div>
22
</TabPaneConnected>
23
</TabContent>
24
</>
25
);

Props

NameTypeDefaultDescription
titlerequiredstring
The title of the Tab
badgeReactNode
Add a Badge to the Tab
disabledboolean
Whether the Tab is disabled or not
groupIdstring
Id to group tabs and tabContents together
iconIcon
Add an icon to the Tab
idstring
Id of the Tab
isActiveboolean
onDestroy() => void
onRender() => void
onSelect(e: MouseEvent<Element, MouseEvent>) => void
selectTab() => void
tooltipstring
Additional text to display as tooltip when hovering over the Tab
urlstring
Add an url to the Tab. Will navigate on click.

Examples

Tab with icons
1
import {TabConnected, TabContent, TabNavigation, TabPaneConnected} from '@coveord/plasma-react';
2
import {HeartSize16Px, LightningSize16Px, RocketSize16Px} from '@coveord/plasma-react-icons';
3
4
export default () => (
5
<>
6
<TabNavigation>
7
<TabConnected groupId="banane" id="tab5" title="Pikachu" icon={LightningSize16Px} />
8
<TabConnected groupId="banane" id="tab6" title="Gyarados" icon={HeartSize16Px} />
9
<TabConnected groupId="banane" id="tab7" title="Charmander" icon={RocketSize16Px} />
10
</TabNavigation>
11
<TabContent>
12
<TabPaneConnected groupId="banane" id="tab5">
13
<div className="mod-header-padding mod-form-top-bottom-padding">Content of the first tab.</div>
14
</TabPaneConnected>
15
<TabPaneConnected groupId="banane" id="tab6">
16
<div className="mod-header-padding mod-form-top-bottom-padding">Content of the second tab.</div>
17
</TabPaneConnected>
18
<TabPaneConnected groupId="banane" id="tab7">
19
<div className="mod-header-padding mod-form-top-bottom-padding">Content of the third tab .</div>
20
</TabPaneConnected>
21
</TabContent>
22
</>
23
);

No guidelines exist for Tab yet.

Create guidelines