Tabs

Tabs

import Tabs, { Tab, TabList, TabPanels, TabPanel } from "@kiwicom/orbit-components/lib/Tabs";
<Tabs>
<TabList>
<Tab>Tab 1</Tab>
<Tab type="basic">Tab 2</Tab>
<Tab type="medium">Tab 3</Tab>
<Tab type="top">Tab 4</Tab>
</TabList>
<TabPanels>
<TabPanel>Tab 1 content</TabPanel>
<TabPanel>Tab 2 content</TabPanel>
<TabPanel>Tab 3 content</TabPanel>
<TabPanel>Tab 4 content</TabPanel>
</TabPanels>
</Tabs>

Tabs

Props

NameTypeDefaultDescription
dataTeststringOptional prop for testing purposes.
defaultSelectednumber0Optional prop to set the initial active tab index. Use only if you do not want to control state on your side
childrenReact.nodeRequired prop that should contain the TabList, TabPanels components.
onChange(selectedIndex: number) => void \| Promise<void>Function for handling onChange. Use only if you do not want to control state on your side.

TabList

NameTypeDefaultDescription
dataTeststringOptional prop for testing purposes.
childrenReact.nodeRequired prop that should contain the Tab components.
compactbooleanfalseOptional prop that responsible for Tabsize, if provided, the Tabs will be smaller.
spacingenumnoneOptional prop to set gap between Tab elements.
fullWidthbooleanfalseOptional prop to set TabList to full width.

Tab

NameTypeDefaultDescription
dataTeststringOptional prop for testing purposes.
disabledbooleanOptional prop to set disabled state.
childrenReact.nodeRequired prop that should contain the Tab content.
typeenumdefaultOptional prop that responsible for Tab style.
activebooleanfalseOptional prop to have controlled behavior over active state.
onClickevent => void \| Promise<void>Function for handling onClick event.

TabPanels

NameTypeDefaultDescription
dataTeststringOptional prop for testing purposes.
childrenReact.nodeRequired prop that should contain the TabPanel components.

TabPanel

NameTypeDefaultDescription
dataTeststringOptional prop for testing purposes.
childrenReact.nodeRequired prop that should contain the TabPanel content.
marginstring \| number \| Object"0"Utility property to set margin.
paddingstring \| number \| Object"0"Utility property to set padding.
activebooleanfalseOptional prop to have controlled behavior over active state.

enum

enum

typespacing
defaultnone
basicXXXSmall- deprecated (use "50")
mediumXXSmall - deprecated (use "100")
topXSmall - deprecated (use "200")
small - deprecated (use "300")
medium - deprecated (use "400")
large - deprecated (use "600")
XLarge - deprecated (use "800")
XXLarge - deprecated (use "1000")
50
100
150
200
300
400
500
600
800
1000
1200
1600