Tabs

The Tabs component displays a group of buttons used to navigate between different views.

Default

A basic tab group with internal state and static content blocks.

Build the perfect messaging experience in 10 minutes.

<Tabs
  tabs={[
    { label: "Home", content: <div>...</div> },
    { label: "Profile", content: <div>...</div> },
    { label: "Settings", content: <div>...</div> },
  ]}
/>

With icons

Each tab can optionally include an icon component before the label.

Explore the many out-of-the-box features of TalkJS.

<Tabs
  tabs={[
    {
      label: (
        <span className="flex items-center gap-1.5">
          <Home className="w-4 h-4" /> Home
        </span>
      ),
      content: <Text as="p">...</Text>,
    },
    {
      label: (
        <span className="flex items-center gap-1.5">
          <View className="w-4 h-4" /> Components
        </span>
      ),
      content: <Text as="p">...</Text>,
    },
    {
      label: (
        <span className="flex items-center gap-1.5">
          <Wikis className="w-4 h-4" /> Customers
        </span>
      ),
      content: <Text as="p">...</Text>,
    },
  ]}
/>

Props

tabs — Array of tab objects with label and content.
onChange — Optional callback called with the selected label.

Usage

Import the Tabs component and define your tab label, content, and optional onChange handler.

import Tabs from "../../components/Tabs";

<Tabs
  tabs={[
    { label: "Home", content: <div>...</div> },
    { label: "Profile", content: <div>...</div> },
  ]}
  onChange={(label) => console.log("Selected:", label)}
/>