Tabs

Displays a tab bar with your content.

Props

Tabs

Name	Type	Required	Default	Description
children	React.ReactNode	Yes	-	The content of the tabs

TabsBar

Name	Type	Required	Default	Description
children	React.ReactNode	Yes	-	The tabs

TabsContent

Name	Type	Required	Default	Description
children	React.ReactNode	Yes	-	The content of the active tab

Tab

Name	Type	Required	Default	Description
children	React.ReactNode	Yes	-	The label of the tab
active	boolean	No	-	The active state of the tab
onClick	(event: React.MouseEvent<HTMLButtonElement>) => void	No	-	The click event handler of the tab
className	string	No	-	Additional class name

Example

Result

Loading...

Live Editor

function Example() {
    const [activeTab, setActiveTab] = React.useState("one");
    return (
        <Tabs>
            <TabsBar>
                <Tab
                    active={activeTab === "one"}
                    onClick={() => setActiveTab("one")}
                >
                    One
                </Tab>
                <Tab
                    active={activeTab === "two"}
                    onClick={() => setActiveTab("two")}
                >
                    Two
                </Tab>
                <Tab
                    active={activeTab === "three"}
                    onClick={() => setActiveTab("three")}
                >
                    Three
                </Tab>
                <Tab
                    active={activeTab === "four"}
                    onClick={() => setActiveTab("four")}
                >
                    Four
                </Tab>
            </TabsBar>
            <TabsContent>Active tab: {activeTab}</TabsContent>
        </Tabs>
    );
}