Tab

The Tab component is used to create individual tabs within a tabbed interface. It provides options for customizing the tab's label, icon, and appearance.

Props

Name	Type	Default	Description
label	`string` \| `JSX.Element` \| `React.ReactNode` \| `React.ReactElement`		The label of the tab. You can use a string, a JSX element, or a React node.
icon	`string` \| `JSX.Element` \| `React.ReactNode` \| `React.ReactElement`		An optional icon to display before the label. You can use a string, a JSX element, or a React node.
suffixIcon	`string` \| `JSX.Element` \| `React.ReactNode` \| `React.ReactElement`		An optional icon to display after the label. You can use a string, a JSX element, or a React node.
prefix	`ReactElement`		An optional element to display before the tab's content.
suffix	`ReactElement`		An optional element to display after the tab's content.
active	`boolean`	`false`	Whether the tab is currently active or not.
disabled	`boolean`	`false`	If `true`, the tab is disabled and cannot be clicked.
onClick	`() => void`		A callback function to execute when the tab is clicked.

Try It

Open Sandbox

import { Tab } from '@kloktun/uikit'
import SearchIcon from './search-icon.tsx'

export default function TabExample() {
    return (
        <div className="flex flex-row">
            <Tab label="Tab 1" active />
            <Tab label="Tab 2" />
            <Tab label="Tab 3" icon={<SearchIcon/>} />
            <Tab label="Tab 4" suffixIcon={<SearchIcon/>} disabled />
            <Tab label="Tab 5" disabled />
        </div>
    );
}

Shimmer Tabs