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 should be used when the content should be structured or divided into clearly labelled sections, without having to navigate between different pages.

Instructions for use

Tabs can be used to switch between different views within the same interface, but should not be used for page navigation. It is acceptable to update the URL to reflect the selected tab.

Tab labels should be short, clear, and descriptive, so users understand what content to expect when selecting a tab.

Be mindful of the number of tabs in a single view. Too many tabs can make the interface difficult to use, especially on smaller screens. In such cases, consider using a Select or Menu instead.

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