title: "Tabs" slug: "/packages/tabs" category: "control" componentNames:

• "TabBar"

Tabs

The Tabs component provides a way to navigate between different views in the same context.

import { TabBar } from "@ds-kit/tabs"

Basic Example

<TabBar items={[{ key: 0, label: "Item 1" }, { key: 1, label: "Item 2" }]} />

RenderProps Example wrapping Tab with a tag

<TabBar
  items={[
    {
      key: 0,
      label: "Item 1",
      tabProps: {
        as: "a",
        href: "https://ds-kit.herokuapp.com/packages/tabs/",
      },
      render: d => <strong>{d.label}</strong>,
    },
    {
      key: 1,
      label: "Item 2",
      tabProps: {
        as: "a",
        href: "https://ds-kit.herokuapp.com/packages/tabs/",
      },
    },
  ]}
/>