Tabs

The Tabs component is made of a horizontal container with the role tablist, which contains tabs. It can be controlled with the keyboard and it needs to be passed an ID for the content it controls.

<Column gap="medium">
  <Tabs
    aria-controls="foo"
    tabs={[
      {
        href: "/Tabs",
        selected: true,
        label: "Tab 1",
      },
      {
        href: "/Tabs",
        selected: false,
        label: "Tab 2",
      },
      {
        href: "/Tabs",
        selected: false,
        label: "Tab 3",
      },
    ]}
  />
  <Tabs
    aria-controls="foo"
    tabs={[
      {
        href: "/Tabs",
        selected: false,
        label: "Tab 1",
      },
      {
        href: "/Tabs",
        selected: true,
        label: "Tab 2",
      },
      {
        href: "/Tabs",
        addOn: (
          <Badge
            jsStyle={{ margin: cssVar("--spacing-m") }}
            color="highlight"
            size="medium"
          />
        ),
        selected: false,
        label: "Tab 3",
      },
    ]}
  />
  <Tabs
    aria-controls="foo"
    tabs={[
      {
        href: "/Tabs",
        selected: false,
        label: "Tab 1",
      },
      {
        href: "/Tabs",
        selected: false,
        label: "Tab 2",
      },
      {
        href: "/Tabs",
        addOn: (
          <Badge
            jsStyle={{ margin: cssVar("--spacing-m") }}
            color="highlight"
            size="medium"
          />
        ),
        addOnPosition: "end",
        selected: true,
        label: "Tab 3",
      },
    ]}
  />
</Column>