Tabs

• A clickable element that allows the user to navigate to another page or area.

import { TabsBar, Tab } from '@viamrobotics/prime-core';

Primary

The first tab The second tab The third tab

<TabsBar aria-label="Tab example -- primary variant">
  <Tab
    title="The first tab"
    href="#first"
    selected
  />
  <Tab
    title="The second tab"
    href="#second"
  />
  <Tab
    title="The third tab"
    href="#third"
  />
</TabsBar>

Secondary

The first tab The second tab The third tab

<TabsBar
  variant="secondary"
  aria-label="Tab example -- secondary variant"
>
  <Tab
    title="The first tab"
    href="#first"
    selected
  />
  <Tab
    title="The second tab"
    href="#second"
  />
  <Tab
    title="The third tab"
    href="#third"
  />
</TabsBar>