Tabs

<TabProvider value={activeTab} onUpdate={setActiveTab}>
    <TabList>
        <Tab value="first">First Tab</Tab>
        <Tab value="second">Active Tab</Tab>
        <Tab value="third" disabled>Disabled Tab</Tab>
    </TabList>
    <div>
        <TabPanel value="first">First Panel</TabPanel>
        <TabPanel value="second">Second Panel</TabPanel>
        <TabPanel value="third">Third Panel</TabPanel>
    </div>
</TabProvider>

<TabList value="second" size="m">
    <Tab value="first">M Size first</Tab>
    <Tab value="second">M Size second</Tab>
</TabList>

<TabList value="second" size="l">
    <Tab value="first">L Size first</Tab>
    <Tab value="second">L Size second</Tab>
</TabList>

<TabList value="second" size="xl">
    <Tab value="first">XL Size first</Tab>
    <Tab value="second">v Size second</Tab>
</TabList>

<TabList value="first">
    <Tab value="first" icon={<Icon size={16} data={GearIcon} />}>Tab with icon</Tab>
    <Tab value="second">Tab without icon</Tab>
</TabList>

<TabList value="first">
    <Tab value="first" >First Tab</Tab>
    <Tab value="second" disabled>Disabled Tab</Tab>
</TabList>

<TabList value="first">
    <Tab value="first" counter={13}>First Tab</Tab>
    <Tab value="second" counter={3}>Second Tab</Tab>
</TabList>

<TabList value="first">
    <Tab value="first" label={{content: 'Label 1'}}>First Tab</Tab>
    <Tab value="second" label={{content: 'Label 2'}}>Second Tab</Tab>
</TabList>