Skip to content
Vy logo
Components

Tabs

Tabs lets you choose between different content panes.

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>