Tabs

<Tabs>
    <Tab label="First Tab">
        Content of the First Tab

        You can use **markdown** here too!
    </Tab>
    <Tab label="Second Tab">
        Content of the Second Tab

        Here's a [link](https://www.google.com)
    </Tab>
</Tabs>

Examples

Custom Color

<Tabs color=#ff0000>
    <Tab label="Red Tabs">
        Content of the First Tab
    </Tab>
    <Tab label="Second Tab">
        Content of the Second Tab
    </Tab>
</Tabs>

Persist Selected Tab to URL

<Tabs id="example-tab">
    <Tab label="One">
        Click Second id Tab and notice the the url updates!
    </Tab>
    <Tab label="Two">
        Refresh the page and the tab you selected persists!
    </Tab>
</Tabs>

Tabs

Options

Unique Id for this set of tabs. When set, the selected tab is included in the URL so it can be shared.

Options:
string

Color for the active tab.

Options:
Any valid hex, rgb, or hsl string
Default:
blue

Tab

Options

Required

Label for the tab

Unique Id for this tab. Only needed if 2 tabs have the same label (not recommended).