You are viewing the legacy documentation of Plasma featuring the components from the@coveord/plasma-react and @coveord/plasma-style packages. Those packages are deprecated and replaced by the @coveord/plasma-mantine package.

Tab

A set of tabs allows users to navigate between sections of the same interface.

View source

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

Name	Type	Description
`title`required	`string`	The title of the Tab
`badge`	`ReactNode`	Add a Badge to the Tab
`disabled`	`boolean`	Whether the Tab is disabled or not
`groupId`	`string`	Id to group tabs and tabContents together
`icon`	`Icon`	Add an icon to the Tab
`id`	`string`	Id of the Tab
`isActive`	`boolean`
`onDestroy`	`() => void`
`onRender`	`() => void`
`onSelect`	`(e: MouseEvent<Element, MouseEvent>) => void`
`selectTab`	`() => void`
`tooltip`	`string`	Additional text to display as tooltip when hovering over the Tab
`url`	`string`	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