@leafygreen-ui/tabs v11.1.15

Tabs

View on MongoDB.design

Installation

Yarn

yarn add @leafygreen-ui/tabs

NPM

npm install @leafygreen-ui/tabs

Example

import { Tabs, Tab } from '@leafygreen-ui/tabs';

const [selected, setSelected] = useState(0)

<Tabs setSelected={setSelected} selected={selected}>
  <Tab name="Tab One">Tab Content One</Tab>
  <Tab name="Tab Two">Tab Content Two</Tab>
  <Tab name="Tab Three">Tab Content Three</Tab>
</Tabs>

Output HTML

<div>
  <div class="leafygreen-ui-4furr2" role="tablist">
    <button
      class="leafygreen-ui-17lvitv"
      role="tab"
      aria-controls="tab-0"
      aria-selected="true"
      tabindex="0"
    >
      Tab One
    </button>
    <button
      class="leafygreen-ui-6uqhxy"
      role="tab"
      aria-controls="tab-1"
      aria-selected="false"
      tabindex="-1"
    >
      Tab Two
    </button>
    <button
      class="leafygreen-ui-6uqhxy"
      role="tab"
      aria-controls="tab-2"
      aria-selected="false"
      tabindex="-1"
    >
      Tab Three
    </button>
  </div>
  <div class="leafygreen-ui-xh3r7y">
    <div class="leafygreen-ui-11283ir"></div>
  </div>
  <div
    aria-disabled="false"
    aria-selected="true"
    aria-controls="tab-0"
    role="tabpanel"
  >
    Tab Content One
  </div>
</div>

Properties

Any other properties supplied will be spread on the root element.

Tab

Properties

Reference

Usage with NextJS Link components

Tabs may not render with the correct tags or styles if the NextJS Link component is passed to the as prop directly, given how NextJS handles default rendering of the component based on the href prop. To work around this, pass the NextJS Link as shown below.

import NextLink from 'next/link';

function Linker({ href, children, ...props }) {
  return (
    <NextLink href={href}>
      <a {...props}>
        {children}
      </a>
    </NextLink>
  );
}

<Tabs aria-label="Profile Sections" as={Linker}>
...
</Tabs>