Skip to content
Vy logo
  • Identitet
  • Spor
  • Resources
Components

Tabs

Tabs lets you choose between different content panes.

FigmaGitHub

Examples

A three tab example

<Tabs defaultValue="coming" fitted>
  <TabsList>
    <TabsTrigger value="coming">
      Kommende
    </TabsTrigger>
    <TabsTrigger value="completed">
      Fullført
    </TabsTrigger>
    <TabsTrigger value="cancelled">
      Avbestilt
    </TabsTrigger>
  </TabsList>
  <TabsContent value="coming">
    <Heading>Kommende</Heading>
    <Text>Kommende billeter</Text>
  </TabsContent>
  <TabsContent value="completed">
    <Heading>Fullført</Heading>
    <Text>Fullført billeter</Text>
  </TabsContent>
  <TabsContent value="cancelled">
    <Heading>Avbestilt</Heading>
    <Text>Avbestilte billeter</Text>
  </TabsContent>
</Tabs>

Different variants

<Stack>
  <Tabs defaultValue="coming" fitted>
    <TabsList>
      <TabsTrigger value="coming">
        Kommende
      </TabsTrigger>
      <TabsTrigger value="completed">
        Fullført
      </TabsTrigger>
      <TabsTrigger value="cancelled">
        Avbestilt
      </TabsTrigger>
    </TabsList>
    <TabsContent value="coming">
      <Heading>Kommende</Heading>
      <Text>Kommende billeter</Text>
    </TabsContent>
    <TabsContent value="completed">
      <Heading>Fullført</Heading>
      <Text>Fullført billeter</Text>
    </TabsContent>
    <TabsContent value="cancelled">
      <Heading>Avbestilt</Heading>
      <Text>Avbestilte billeter</Text>
    </TabsContent>
  </Tabs>
  <Tabs defaultValue="coming" fitted variant="accent">
    <TabsList>
      <TabsTrigger value="coming">
        Kommende
      </TabsTrigger>
      <TabsTrigger value="completed">
        Fullført
      </TabsTrigger>
      <TabsTrigger value="cancelled">
        Avbestilt
      </TabsTrigger>
    </TabsList>
    <TabsContent value="coming">
      <Heading>Kommende</Heading>
      <Text>Kommende billeter</Text>
    </TabsContent>
    <TabsContent value="completed">
      <Heading>Fullført</Heading>
      <Text>Fullført billeter</Text>
    </TabsContent>
    <TabsContent value="cancelled">
      <Heading>Avbestilt</Heading>
      <Text>Avbestilte billeter</Text>
    </TabsContent>
  </Tabs>
</Stack>

Different sizes

<Stack>
  <Tabs defaultValue="coming" size="xs">
    <TabsList>
      <TabsTrigger value="coming">
        Tog xs
      </TabsTrigger>
      <TabsTrigger value="completed"> 
        Buss
      </TabsTrigger>
      <TabsTrigger value="cancelled">
        Taxi
      </TabsTrigger>
    </TabsList>
  </Tabs>
  <Tabs defaultValue="coming" size="sm">
    <TabsList>
      <TabsTrigger value="coming">
        Tog sm
      </TabsTrigger>
      <TabsTrigger value="completed">
        Buss
      </TabsTrigger>
      <TabsTrigger value="cancelled">
        Taxi
      </TabsTrigger>
    </TabsList>
  </Tabs>
  <Tabs defaultValue="coming" size="md">
    <TabsList>
      <TabsTrigger value="coming">
        Tog md
      </TabsTrigger>
      <TabsTrigger value="completed">
        Buss
      </TabsTrigger>
      <TabsTrigger value="cancelled">
        Taxi
      </TabsTrigger>
    </TabsList>
  </Tabs>
  <Tabs defaultValue="coming" size="lg">
    <TabsList>
      <TabsTrigger value="coming">
        Tog lg
      </TabsTrigger>
      <TabsTrigger value="completed">
        Buss
      </TabsTrigger>
      <TabsTrigger value="cancelled">
        Taxi
      </TabsTrigger>
    </TabsList>
  </Tabs>
</Stack>

Tabs that only use the space that it needs

<Tabs defaultValue="coming">
  <TabsList>
    <TabsTrigger value="coming">
      Kommende
    </TabsTrigger>
    <TabsTrigger value="completed">
      Fullført
    </TabsTrigger>
    <TabsTrigger value="cancelled">
      Avbestilt
    </TabsTrigger>
  </TabsList>
</Tabs>

You can place whatever you want inside the TabTrigger component — notifications, loading indicators, counters, icons, badges etc.

<Tabs defaultValue="behandlet" size="lg" variant="accent">
  <TabsList>
    <TabsTrigger value="ubehandlet" gap="2">
      Ubehandlet <Badge colorPalette="red">22</Box>
    </TabsTrigger>
    <TabsTrigger value="behandlet">
      Behandlet
    </TabsTrigger>
    <TabsTrigger value="ikke-berort" gap="2">
      Ikke berørt <Badge colorPalette="green">14</Badge>
    </TabsTrigger>
  </TabsList>
</Tabs>

Guidelines

Tabs are a very versatile component. They can be used to control which user interface is displayed, or to create nested user interfaces at different levels.

There are two different variants - core and accent.

There are four different sizes to choose from.

Code

<Tabs />

import { Tabs } from "@vygruppen/spor-react";

Props

Name
Type
Required?
Description
variant"core" | "accent"
fittedbooleanIf true, this prop makes the line of tabs take up all the space available. If false take the space required to fit the tab labels.
onChange(index: number) => voidCallback for when the tab changes (useful for when controlled)
size"xs" | "sm" | "md" | "lg"Default "md"

<TabList />

import { TabList } from "@vygruppen/spor-react";

Container for Tab components

Props

Name
Type
Required?
Description
childrenReact.ReactNodeAccepts a list of Tab components

<TabsTrigger />

import { TabsTrigger } from "@vygruppen/spor-react";

The interactive tab you click to select a given tab panel

Props

Name
Type
Required?
Description
childrenReact.ReactNodeThe title of a tab
disabledboolean[]default: false
valuestringThis value will match with TabsContent value

<TabsContent />

import { TabsContent } from "@vygruppen/spor-react";

A wrapper component for TabPanel components

Props

Name
Type
Required?
Description
childrenReact.ReactNodeAccepts a list of TabPanel components
valuestringThis value will match with TabsTrigger value