Tabs

Switches between multiple views as local navigation (distinct from global nav like TopAppBar or BottomNavigation).

Last updated 11/1/2024

Example

Use multiple TabItems within Tabs.

import { TabItem } from "@serendie/ui";
import { Tabs } from "@serendie/ui";

export function TabsSample() {
  return (
    <Tabs defaultValue="2">
      <TabItem title="連絡先" value="1" />
      <TabItem title="トーク" value="2" />
      <TabItem title="売上履歴" value="3" dot />
      <TabItem title="入出金" value="4" badge={3} disabled />
    </Tabs>
  );
}

Variants

TabItem has a variant with a notification badge.

Default
With Badge
With Badge (Number)

import { Dd, Dl, Dt } from "@/components/LayoutUtils";
import { TabItem, Tabs } from "@serendie/ui";

export function TabsNotificationSample() {
  return (
    <Dl>
      <Dt>Default</Dt>
      <Dd>
        <Tabs defaultValue="1">
          <TabItem title="連絡先" value="1" />
          <TabItem title="トーク" value="2" />
          <TabItem title="売上履歴" value="3" />
          <TabItem title="入出金" value="4" />
        </Tabs>
      </Dd>

      <Dt>With Badge</Dt>
      <Dd>
        <Tabs defaultValue="1">
          <TabItem title="連絡先" value="1" dot />
          <TabItem title="トーク" value="2" />
          <TabItem title="売上履歴" value="3" />
          <TabItem title="入出金" value="4" />
        </Tabs>
      </Dd>

      <Dt>With Badge (Number)</Dt>
      <Dd>
        <Tabs defaultValue="1">
          <TabItem title="連絡先" value="1" badge={3} />
          <TabItem title="トーク" value="2" />
          <TabItem title="売上履歴" value="3" />
          <TabItem title="入出金" value="4" />
        </Tabs>
      </Dd>
    </Dl>
  );
}

States

TabItem has six states. Use the disabled prop when non-interactive.


Default
Selected
Default
Focused
Disabled