Tabs

Default

OverviewDetailsHistory

Overview content goes here.

import { Tabs } from '@eekodigital/raster';

<Tabs.Root defaultValue="overview">
  <Tabs.List>
    <Tabs.Trigger value="overview">Overview</Tabs.Trigger>
    <Tabs.Trigger value="details">Details</Tabs.Trigger>
    <Tabs.Trigger value="history">History</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="overview">Overview content</Tabs.Content>
  <Tabs.Content value="details">Details content</Tabs.Content>
  <Tabs.Content value="history">History content</Tabs.Content>
</Tabs.Root>

With disabled tab

ActiveArchived

Active items.

<Tabs.Root defaultValue="active">
  <Tabs.List>
    <Tabs.Trigger value="active">Active</Tabs.Trigger>
    <Tabs.Trigger value="archived" disabled>Archived</Tabs.Trigger>
  </Tabs.List>
  …
</Tabs.Root>