Skip to content
Vy logo
  • 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
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