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

Tabs

Tabs lets you choose between different content panes.

FigmaGitHub

Code examples

<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 variant="md">Kommende</Heading>
    <Text>Kommende billeter</Text>
  </TabsContent>
  <TabsContent value="completed">
    <Heading variant="md">Fullført</Heading>
    <Text>Fullført billeter</Text>
  </TabsContent>
  <TabsContent value="cancelled">
    <Heading variant="md">Avbestilt</Heading>
    <Text>Avbestilte billeter</Text>
  </TabsContent>
</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
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"
variant"core" | "accent"

<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