Components

Tabs

Tabs lets you choose between different content panes.

Examples

A three tab example

<Tabs>
  <TabList>
    <Tab>Kommende</Tab>
    <Tab>Fullført</Tab>
    <Tab>Avbestilt</Tab>
  </TabList>

  <TabPanels>
    <TabPanel>
      <Heading>Kommende reiser</Heading>
      <Text>Du har ingen kommende reiser</Text>
    </TabPanel>
    <TabPanel>
      <Heading>Fullførte reiser</Heading>
      <Text>Du har ingen fullførte reiser</Text>
    </TabPanel>
    <TabPanel>
      <Heading>Avbestilte reiser</Heading>
      <Text>Du har ingen avbestilte reiser</Text>
    </TabPanel>
  </TabPanels>
</Tabs>

Different variants

<Stack>
  <Tabs variant="base">
    <TabList>
      <Tab>Før</Tab>
      <Tab>Under</Tab>
      <Tab>Etter</Tab>
    </TabList>
  </Tabs>
  <Tabs variant="accent">
    <TabList>
      <Tab>Før</Tab>
      <Tab>Under</Tab>
      <Tab>Etter</Tab>
    </TabList>
  </Tabs>
</Stack>

Different sizes

<Stack>
  <Tabs size="lg">
    <TabList>
      <Tab>Dette</Tab>
      <Tab>er</Tab>
      <Tab>xl</Tab>
    </TabList>
  </Tabs>
  <Tabs size="md">
    <TabList>
      <Tab>Dette</Tab>
      <Tab>er</Tab>
      <Tab>lg</Tab>
    </TabList>
  </Tabs>
  <Tabs size="sm">
    <TabList>
      <Tab>Dette</Tab>
      <Tab>er</Tab>
      <Tab>md</Tab>
    </TabList>
  </Tabs>
  <Tabs size="xs">
    <TabList>
      <Tab>Dette</Tab>
      <Tab>er</Tab>
      <Tab>sm</Tab>
    </TabList>
  </Tabs>
</Stack>

Tabs that only use the space that it needs

<Tabs variant="base" isFitted={true}>
  <TabList>
    <Tab>Dette</Tab>
    <Tab>er</Tab>
    <Tab>isFitted</Tab>
  </TabList>
</Tabs>