Tabs

Tabs are a navigation component that allows users to switch between different sections of content within the same interface.
They improve user experience by reducing clutter and providing a clear and intuitive way to navigate through multiple sections.

Live code

Example

Copy code

Open Sandbox

Reset demo

Storybook

Storybook failed to load. Please connect to the VPN to access.

Usage

Tabs

The Tab component is used to organize related content. User can navigate between groups of information in tabbable regions.

Tab


                                                
                                                const [selectedId, setSelectedTab] = useState(1);
                                                
                                                const selectTab = useCallback((id) => {
                                                  setSelectedTab(id);
                                                }, []);
                                                
                                                <Tabs selectedTab={selectedId} toggle={selectTab}>
                                                  <TabList>
                                                    <TabItem forTabPane={1}>Item Selected</TabItem>
                                                    <TabItem forTabPane={2}>Item</TabItem>
                                                  </TabList>
                                                  <TabContent>
                                                    <TabPane id={1}>Pane 1</TabPane>
                                                    <TabPane id={2}>Pane 2</TabPane>
                                                  </TabContent>
                                                </Tabs>;

Tab with Links


                                                
                                                const [selectedId, setSelectedTab] = useState(1);
                                                
                                                const selectTab = useCallback((id) => {
                                                  setSelectedTab(id);
                                                }, []);
                                                
                                                <Tabs selectedTab={selectedId} toggle={selectTab}>
                                                  <TabList>
                                                    <TabItem forTabPane={1}>Item Selected</TabItem>
                                                    <TabItem forTabPane={2}>Item</TabItem>
                                                    <TabLink href="https://www.example.com">Item Link</TabLink>
                                                    <TabLink href="https://www.example.com">Item Link Only Desktop</TabLink>
                                                  </TabList>
                                                  <TabContent>
                                                    <TabPane id={1}>Pane 1</TabPane>
                                                    <TabPane id={2}>Pane 2</TabPane>
                                                  </TabContent>
                                                </Tabs>;

Uncontrolled Tabs


                                                
                                                <UncontrolledTabs defaultSelectedTab={1}>
                                                  <TabList>
                                                    <TabItem forTabPane={1}>Item Selected</TabItem>
                                                    <TabItem forTabPane={2}>Item</TabItem>
                                                  </TabList>
                                                  <TabContent>
                                                    <TabPane id={1}>Pane 1</TabPane>
                                                    <TabPane id={2}>Pane 2</TabPane>
                                                  </TabContent>
                                                </UncontrolledTabs>

Custom Spacing

You can use the spacing prop to apply custom spacing between items. The prop accepts either a spacing token (e.g. space-100) or an object with breakpoint keys and spacing token values.

Default spacing:


                                                
                                                <Tabs spacing="space-1200">{/* Tabs content */}</Tabs>

Custom responsive spacing:


                                                
                                                <Tabs spacing={{ mobile: 'space-400', tablet: 'space-800' }}>{/* Tabs content */}</Tabs>

Tabs

API

Name	Type	Default	Required	Description
selectedTab	[string \| number]	—	✓	Identification of the selected tab
toogle	Function	—	✓	Toggle function which accept tab ID as input
children	any	—	✕	Child component
onSelectionChange	(id: TabId) => void	—	✕	When the state of the selected panel changes
spacing	[SpaceToken \| Partial<Record<BreakpointToken, SpaceToken>>]	—	✕	Apply custom spacing between items

UncontrolledTabs

API

Name	Type	Default	Required	Description
defaultSelectedTab	[string \| number]	—	✓	Identification of default selected tab
children	any	—	✕	Child component
onSelectionChange	(id: TabId) => void	—	✕	When the state of the selected panel changes
spacing	[SpaceToken \| Partial<Record<BreakpointToken, SpaceToken>>]	—	✕	Apply custom spacing between items