Tabs

TkTabs is a navigation component that displays menu items as tab headers.

React
Vue
Angular

import { TkTabs, TkTabsItem } from '@takeoff-ui/react'

import { TkTabs, TkTabsItem } from '@takeoff-ui/vue'

import { TkTabs, TkTabsItem } from '@takeoff-ui/angular'

Type

Establishes various tab styles basic, divided, compact, expanded available via the type property.

Basic

Adipisicing aliqua nulla cupidatat proident.

Culpa aliqua nisi elit velit nostrud id quis.

Pariatur elit ad culpa quis.

Compact

Adipisicing aliqua nulla cupidatat proident.

Culpa aliqua nisi elit velit nostrud id quis.

Pariatur elit ad culpa quis.

Divided

Adipisicing aliqua nulla cupidatat proident.

Culpa aliqua nisi elit velit nostrud id quis.

Pariatur elit ad culpa quis.

Expanded

Adipisicing aliqua nulla cupidatat proident.

Culpa aliqua nisi elit velit nostrud id quis.

Pariatur elit ad culpa quis.

View Code

React
Vue
Angular

<TkTabs type="basic">
    <TkTabsItem label="Tab label" icon="flight">
      <p>Adipisicing aliqua nulla cupidatat proident.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Culpa aliqua nisi elit velit nostrud id quis.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Pariatur elit ad culpa quis.</p>
    </TkTabsItem>
  </TkTabs>

  <TkTabs type="compact">
    <TkTabsItem label="Tab label" icon="flight">
      <p>Adipisicing aliqua nulla cupidatat proident.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Culpa aliqua nisi elit velit nostrud id quis.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Pariatur elit ad culpa quis.</p>
    </TkTabsItem>
  </TkTabs>

  <TkTabs type="divided">
    <TkTabsItem label="Tab label" icon="flight">
      <p>Adipisicing aliqua nulla cupidatat proident.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Culpa aliqua nisi elit velit nostrud id quis.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Pariatur elit ad culpa quis.</p>
    </TkTabsItem>
  </TkTabs>

  <TkTabs type="expanded">
    <TkTabsItem label="Tab label" icon="flight">
      <p>Adipisicing aliqua nulla cupidatat proident.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Culpa aliqua nisi elit velit nostrud id quis.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Pariatur elit ad culpa quis.</p>
    </TkTabsItem>
  </TkTabs>

<TkTabs type="basic">
    <TkTabsItem label="Tab label" icon="flight">
      <p>Adipisicing aliqua nulla cupidatat proident.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Culpa aliqua nisi elit velit nostrud id quis.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Pariatur elit ad culpa quis.</p>
    </TkTabsItem>
  </TkTabs>
  
  <TkTabs type="compact">
    <TkTabsItem label="Tab label" icon="flight">
      <p>Adipisicing aliqua nulla cupidatat proident.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Culpa aliqua nisi elit velit nostrud id quis.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Pariatur elit ad culpa quis.</p>
    </TkTabsItem>
  </TkTabs>

  <TkTabs type="dvided">
    <TkTabsItem label="Tab label" icon="flight">
      <p>Adipisicing aliqua nulla cupidatat proident.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Culpa aliqua nisi elit velit nostrud id quis.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Pariatur elit ad culpa quis.</p>
    </TkTabsItem>
  </TkTabs>

  <TkTabs type="expanded">
    <TkTabsItem label="Tab label" icon="flight">
      <p>Adipisicing aliqua nulla cupidatat proident.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Culpa aliqua nisi elit velit nostrud id quis.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Pariatur elit ad culpa quis.</p>
    </TkTabsItem>
  </TkTabs>

<tk-tabs type="basic">
    <tk-tabs-item label="Tab label" icon="flight">
      <p>Adipisicing aliqua nulla cupidatat proident.</p>
    </tk-tabs-item>
    <tk-tabs-item label="Tab label" icon="flight">
      <p>Culpa aliqua nisi elit velit nostrud id quis.</p>
    </tk-tabs-item>
    <tk-tabs-item label="Tab label" icon="flight">
      <p>Pariatur elit ad culpa quis.</p>
    </tk-tabs-item>
  </tk-tabs>

  <tk-tabs type="compact">
    <tk-tabs-item label="Tab label" icon="flight">
      <p>Adipisicing aliqua nulla cupidatat proident.</p>
    </tk-tabs-item>
    <tk-tabs-item label="Tab label" icon="flight">
      <p>Culpa aliqua nisi elit velit nostrud id quis.</p>
    </tk-tabs-item>
    <tk-tabs-item label="Tab label" icon="flight">
      <p>Pariatur elit ad culpa quis.</p>
    </tk-tabs-item>
  </tk-tabs>

  <tk-tabs type="divided">
    <tk-tabs-item label="Tab label" icon="flight">
      <p>Adipisicing aliqua nulla cupidatat proident.</p>
    </tk-tabs-item>
    <tk-tabs-item label="Tab label" icon="flight">
      <p>Culpa aliqua nisi elit velit nostrud id quis.</p>
    </tk-tabs-item>
    <tk-tabs-item label="Tab label" icon="flight">
      <p>Pariatur elit ad culpa quis.</p>
    </tk-tabs-item>
  </tk-tabs>

  <tk-tabs type="expanded">
    <tk-tabs-item label="Tab label" icon="flight">
      <p>Adipisicing aliqua nulla cupidatat proident.</p>
    </tk-tabs-item>
    <tk-tabs-item label="Tab label" icon="flight">
      <p>Culpa aliqua nisi elit velit nostrud id quis.</p>
    </tk-tabs-item>
    <tk-tabs-item label="Tab label" icon="flight">
      <p>Pariatur elit ad culpa quis.</p>
    </tk-tabs-item>
  </tk-tabs>

Variants

Provides 3 different variant primary, info, neutral via variant property.

Primary

Adipisicing aliqua nulla cupidatat proident.

Culpa aliqua nisi elit velit nostrud id quis.

Pariatur elit ad culpa quis.

Info

Adipisicing aliqua nulla cupidatat proident.

Culpa aliqua nisi elit velit nostrud id quis.

Pariatur elit ad culpa quis.

Neutral

Adipisicing aliqua nulla cupidatat proident.

Culpa aliqua nisi elit velit nostrud id quis.

Pariatur elit ad culpa quis.

View Code

React
Vue
Angular

<TkTabs variant="primary">
    <TkTabsItem label="Tab label" icon="flight">
      <p>Adipisicing aliqua nulla cupidatat proident.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Culpa aliqua nisi elit velit nostrud id quis.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Pariatur elit ad culpa quis.</p>
    </TkTabsItem>
  </TkTabs>

  <TkTabs variant="info">
    <TkTabsItem label="Tab label" icon="flight">
      <p>Adipisicing aliqua nulla cupidatat proident.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Culpa aliqua nisi elit velit nostrud id quis.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Pariatur elit ad culpa quis.</p>
    </TkTabsItem>
  </TkTabs>

  <TkTabs variant="neutral">
    <TkTabsItem label="Tab label" icon="flight">
      <p>Adipisicing aliqua nulla cupidatat proident.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Culpa aliqua nisi elit velit nostrud id quis.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Pariatur elit ad culpa quis.</p>
    </TkTabsItem>
  </TkTabs>

<TkTabs variant="primary">
    <TkTabsItem label="Tab label" icon="flight">
      <p>Adipisicing aliqua nulla cupidatat proident.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Culpa aliqua nisi elit velit nostrud id quis.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Pariatur elit ad culpa quis.</p>
    </TkTabsItem>
  </TkTabs>

  <TkTabs variant="info">
    <TkTabsItem label="Tab label" icon="flight">
      <p>Adipisicing aliqua nulla cupidatat proident.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Culpa aliqua nisi elit velit nostrud id quis.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Pariatur elit ad culpa quis.</p>
    </TkTabsItem>
  </TkTabs>

  <TkTabs variant="neutral">
    <TkTabsItem label="Tab label" icon="flight">
      <p>Adipisicing aliqua nulla cupidatat proident.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Culpa aliqua nisi elit velit nostrud id quis.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Pariatur elit ad culpa quis.</p>
    </TkTabsItem>
  </TkTabs>

<tk-tabs variant="primary">
    <tk-tabs-item label="Tab label" icon="flight">
      <p>Adipisicing aliqua nulla cupidatat proident.</p>
    </tk-tabs-item>
    <tk-tabs-item label="Tab label" icon="flight">
      <p>Culpa aliqua nisi elit velit nostrud id quis.</p>
    </tk-tabs-item>
    <tk-tabs-item label="Tab label" icon="flight">
      <p>Pariatur elit ad culpa quis.</p>
    </tk-tabs-item>
  </tk-tabs>

  <tk-tabs variant="info">
    <tk-tabs-item label="Tab label" icon="flight">
      <p>Adipisicing aliqua nulla cupidatat proident.</p>
    </tk-tabs-item>
    <tk-tabs-item label="Tab label" icon="flight">
      <p>Culpa aliqua nisi elit velit nostrud id quis.</p>
    </tk-tabs-item>
    <tk-tabs-item label="Tab label" icon="flight">
      <p>Pariatur elit ad culpa quis.</p>
    </tk-tabs-item>
  </tk-tabs>

  <tk-tabs variant="neutral">
    <tk-tabs-item label="Tab label" icon="flight">
      <p>Adipisicing aliqua nulla cupidatat proident.</p>
    </tk-tabs-item>
    <tk-tabs-item label="Tab label" icon="flight">
      <p>Culpa aliqua nisi elit velit nostrud id quis.</p>
    </tk-tabs-item>
    <tk-tabs-item label="Tab label" icon="flight">
      <p>Pariatur elit ad culpa quis.</p>
    </tk-tabs-item>
  </tk-tabs>

Spread Headers

Determines whether the tab headers will spread evenly across the horizontal space.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate nequequas! 1

View Code

React
Vue
Angular

<TkTabs spreadHeaders>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate nequequas!</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate nequequas!</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate nequequas!</p>
    </TkTabsItem>
  </TkTabs>

<TkTabs :spreadHeaders.prop="true">
    <TkTabsItem label="Tab label" icon="flight">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate nequequas!</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate nequequas!</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate nequequas!</p>
    </TkTabsItem>
  </TkTabs>

<tk-tabs [spreadHeaders]="true">
    <tk-tabs-item label="Tab label" icon="flight">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate nequequas!</p>
    </tk-tabs-item>
    <tk-tabs-item label="Tab label" icon="flight">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate nequequas!</p>
    </tk-tabs-item>
    <tk-tabs-item label="Tab label" icon="flight">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate nequequas!</p>
    </tk-tabs-item>
  </tk-tabs>

Align Headers

Tabs headers can aligned as start, center or end via align-headers property.

Start

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Incididunt velit elit cupidatat dolore elit tempor laborum dolor amet magna aute magna pariatur.

Nulla cillum laborum amet sunt irure dolore veniam esse veniam ex ullamco.

Center

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

End

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

View Code

React
Vue
Angular

<TkTabs alignHeaders="start">
    <TkTabsItem label="Tab label" icon="flight">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Incididunt velit elit cupidatat dolore elit tempor laborum dolor amet magna aute magna pariatur.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Nulla cillum laborum amet sunt irure dolore veniam esse veniam ex ullamco.</p>
    </TkTabsItem>
  </TkTabs>

  <TkTabs alignHeaders="center">
    <TkTabsItem label="Tab label" icon="flight">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </TkTabsItem>
  </TkTabs>

  <TkTabs alignHeaders="end">
    <TkTabsItem label="Tab label" icon="flight">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </TkTabsItem>
  </TkTabs>

<TkTabs alignHeaders="start">
    <TkTabsItem label="Tab label" icon="flight">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Incididunt velit elit cupidatat dolore elit tempor laborum dolor amet magna aute magna pariatur.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Nulla cillum laborum amet sunt irure dolore veniam esse veniam ex ullamco.</p>
    </TkTabsItem>
  </TkTabs>

  <TkTabs alignHeaders="center">
    <TkTabsItem label="Tab label" icon="flight">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </TkTabsItem>
  </TkTabs>

  <TkTabs alignHeaders="end">
    <TkTabsItem label="Tab label" icon="flight">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </TkTabsItem>
  </TkTabs>

<tk-tabs alignHeaders="start">
    <tk-tabs-item label="Tab label" icon="flight">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </tk-tabs-item>
    <tk-tabs-item label="Tab label" icon="flight">
      <p>Incididunt velit elit cupidatat dolore elit tempor laborum dolor amet magna aute magna pariatur.</p>
    </tk-tabs-item>
    <tk-tabs-item label="Tab label" icon="flight">
      <p>Nulla cillum laborum amet sunt irure dolore veniam esse veniam ex ullamco.</p>
    </tk-tabs-item>
  </tk-tabs>

  <tk-tabs alignHeaders="center">
    <tk-tabs-item label="Tab label" icon="flight">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </tk-tabs-item>
    <tk-tabs-item label="Tab label" icon="flight">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </tk-tabs-item>
    <tk-tabs-item label="Tab label" icon="flight">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </tk-tabs-item>
  </tk-tabs>

  <tk-tabs alignHeaders="end">
    <tk-tabs-item label="Tab label" icon="flight">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </tk-tabs-item>
    <tk-tabs-item label="Tab label" icon="flight">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </tk-tabs-item>
    <tk-tabs-item label="Tab label" icon="flight">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </tk-tabs-item>
  </tk-tabs>

Sizes

Provides 5 different sizes xxsmall, xsmall, small, base, large available via size property.

XSmall

Adipisicing aliqua nulla cupidatat proident.

Culpa aliqua nisi elit velit nostrud id quis.

Pariatur elit ad culpa quis.

Base

Adipisicing aliqua nulla cupidatat proident.

Culpa aliqua nisi elit velit nostrud id quis.

Pariatur elit ad culpa quis.

Large

Adipisicing aliqua nulla cupidatat proident.

Culpa aliqua nisi elit velit nostrud id quis.

Pariatur elit ad culpa quis.

View Code

React
Vue
Angular

<TkTabs size="xsmall">
    <TkTabsItem label="Tab label" icon="flight">
      <p>Adipisicing aliqua nulla cupidatat proident.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Culpa aliqua nisi elit velit nostrud id quis.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Pariatur elit ad culpa quis.</p>
    </TkTabsItem>
  </TkTabs>

  <TkTabs size="base">
    <TkTabsItem label="Tab label" icon="flight">
      <p>Adipisicing aliqua nulla cupidatat proident.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Culpa aliqua nisi elit velit nostrud id quis.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Pariatur elit ad culpa quis.</p>
    </TkTabsItem>
  </TkTabs>

  <TkTabs size="large">
    <TkTabsItem label="Tab label" icon="flight">
      <p>Adipisicing aliqua nulla cupidatat proident.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Culpa aliqua nisi elit velit nostrud id quis.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Pariatur elit ad culpa quis.</p>
    </TkTabsItem>
  </TkTabs>

<TkTabs size="xsmall">
    <TkTabsItem label="Tab label" icon="flight">
      <p>Adipisicing aliqua nulla cupidatat proident.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Culpa aliqua nisi elit velit nostrud id quis.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Pariatur elit ad culpa quis.</p>
    </TkTabsItem>
  </TkTabs>

  <TkTabs size="base">
    <TkTabsItem label="Tab label" icon="flight">
      <p>Adipisicing aliqua nulla cupidatat proident.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Culpa aliqua nisi elit velit nostrud id quis.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Pariatur elit ad culpa quis.</p>
    </TkTabsItem>
  </TkTabs>

  <TkTabs size="large">
    <TkTabsItem label="Tab label" icon="flight">
      <p>Adipisicing aliqua nulla cupidatat proident.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Culpa aliqua nisi elit velit nostrud id quis.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Pariatur elit ad culpa quis.</p>
    </TkTabsItem>
  </TkTabs>

<tk-tabs size="xsmall">
    <tk-tabs-item label="Tab label" icon="flight">
      <p>Adipisicing aliqua nulla cupidatat proident.</p>
    </tk-tabs-item>
    <tk-tabs-item label="Tab label" icon="flight">
      <p>Culpa aliqua nisi elit velit nostrud id quis.</p>
    </tk-tabs-item>
    <tk-tabs-item label="Tab label" icon="flight">
      <p>Pariatur elit ad culpa quis.</p>
    </tk-tabs-item>
  </tk-tabs>

  <tk-tabs size="base">
    <tk-tabs-item label="Tab label" icon="flight">
      <p>Adipisicing aliqua nulla cupidatat proident.</p>
    </tk-tabs-item>
    <tk-tabs-item label="Tab label" icon="flight">
      <p>Culpa aliqua nisi elit velit nostrud id quis.</p>
    </tk-tabs-item>
    <tk-tabs-item label="Tab label" icon="flight">
      <p>Pariatur elit ad culpa quis.</p>
    </tk-tabs-item>
  </tk-tabs>

  <tk-tabs size="large">
    <tk-tabs-item label="Tab label" icon="flight">
      <p>Adipisicing aliqua nulla cupidatat proident.</p>
    </tk-tabs-item>
    <tk-tabs-item label="Tab label" icon="flight">
      <p>Culpa aliqua nisi elit velit nostrud id quis.</p>
    </tk-tabs-item>
    <tk-tabs-item label="Tab label" icon="flight">
      <p>Pariatur elit ad culpa quis.</p>
    </tk-tabs-item>
  </tk-tabs>

Orientation

Provides both horizontal and vertical orientations via orientation property.

Horizontal

Eiusmod nulla excepteur ex esse cupidatat quis minim proident et consequat eu. Officia ut sit aute anim aute. Culpa exercitation occaecat anim ad velit velit commodo. Eu est nostrud ad nulla. Ex ipsum irure proident ea incididunt. Proident occaecat veniam nulla pariatur nulla ullamco.

Reprehenderit est enim esse ut id velit enim. Anim labore dolor sint consectetur velit fugiat veniam aute in esse. Cupidatat voluptate eiusmod consequat dolore enim nostrud pariatur irure ipsum voluptate occaecat non. Voluptate mollit consectetur qui pariatur eu veniam consectetur.

Velit deserunt ut ullamco do excepteur consectetur sint eiusmod. Nisi do velit eiusmod exercitation excepteur laborum ex cillum culpa laboris voluptate. Elit duis elit incididunt ad excepteur consequat eiusmod sunt fugiat commodo exercitation aliqua cupidatat. Enim excepteur dolore qui irure velit excepteur ea occaecat dolor tempor eu ex ipsum tempor. Deserunt et velit incididunt ex velit elit labore minim.

Vertical

Deserunt ad adipisicing do aliqua enim ut culpa qui ad ut tempor. Et elit veniam commodo aliquip nostrud incididunt laboris ex ad laboris non nostrud ea sunt. Aute qui reprehenderit ad est ad ipsum duis. Velit minim ipsum occaecat occaecat aliqua exercitation proident quis dolor enim mollit eiusmod esse. Exercitation magna laboris adipisicing consectetur veniam ex exercitation nisi laboris officia. Consectetur dolor dolor velit occaecat officia dolore occaecat aliquip laboris nisi irure voluptate. Ullamco anim magna est velit proident quis nulla ullamco fugiat.

Nulla cupidatat culpa irure dolore anim ut eiusmod incididunt. Ut Lorem anim eu esse fugiat aliqua quis anim adipisicing fugiat. Mollit reprehenderit irure cillum non ad sint non laborum sit deserunt.

Ad dolor excepteur consequat incididunt minim sit quis ipsum fugiat labore pariatur consectetur aliqua. Cupidatat eu exercitation et ex veniam adipisicing laboris eu dolor. Eiusmod deserunt laboris reprehenderit nulla anim enim. Est dolor consequat cillum consectetur. Consequat eiusmod adipisicing est amet incididunt duis eiusmod qui anim excepteur nisi aliquip.

View Code

React
Vue
Angular

<TkTabs orientation="horizontal">
    <TkTabsItem label="Tab label" icon="flight">
      <p>Eiusmod nulla excepteur ex esse cupidatat quis minim proident et consequat eu. Officia ut sit aute anim aute. Culpa exercitation occaecat anim ad velit velit commodo. Eu est nostrud ad nulla. Ex ipsum irure proident ea incididunt. Proident occaecat veniam nulla pariatur nulla ullamco.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Reprehenderit est enim esse ut id velit enim. Anim labore dolor sint consectetur velit fugiat veniam aute in esse. Cupidatat voluptate eiusmod consequat dolore enim nostrud pariatur irure ipsum voluptate occaecat non. Voluptate mollit consectetur qui pariatur eu veniam consectetur.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Velit deserunt ut ullamco do excepteur consectetur sint eiusmod. Nisi do velit eiusmod exercitation excepteur laborum ex cillum culpa laboris voluptate. Elit duis elit incididunt ad excepteur consequat eiusmod sunt fugiat commodo exercitation aliqua cupidatat. Enim excepteur dolore qui irure velit excepteur ea occaecat dolor tempor eu ex ipsum tempor. Deserunt et velit incididunt ex velit elit labore minim.</p>
    </TkTabsItem>
  </TkTabs>

  <TkTabs orientation="vertical">
    <TkTabsItem label="Tab label" icon="flight">
      <p>Deserunt ad adipisicing do aliqua enim ut culpa qui ad ut tempor. Et elit veniam commodo aliquip nostrud incididunt laboris ex ad laboris non nostrud ea sunt. Aute qui reprehenderit ad est ad ipsum duis. Velit minim ipsum occaecat occaecat aliqua exercitation proident quis dolor enim mollit eiusmod esse. Exercitation magna laboris adipisicing consectetur veniam ex exercitation nisi laboris officia. Consectetur dolor dolor velit occaecat officia dolore occaecat aliquip laboris nisi irure voluptate. Ullamco anim magna est velit proident quis nulla ullamco fugiat.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Nulla cupidatat culpa irure dolore anim ut eiusmod incididunt. Ut Lorem anim eu esse fugiat aliqua quis anim adipisicing fugiat. Mollit reprehenderit irure cillum non ad sint non laborum sit deserunt.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Ad dolor excepteur consequat incididunt minim sit quis ipsum fugiat labore pariatur consectetur aliqua. Cupidatat eu exercitation et ex veniam adipisicing laboris eu dolor. Eiusmod deserunt laboris reprehenderit nulla anim enim. Est dolor consequat cillum consectetur. Consequat eiusmod adipisicing est amet incididunt duis eiusmod qui anim excepteur nisi aliquip.</p>
    </TkTabsItem>
  </TkTabs>

<TkTabs orientation="horizontal">
    <TkTabsItem label="Tab label" icon="flight">
      <p>Eiusmod nulla excepteur ex esse cupidatat quis minim proident et consequat eu. Officia ut sit aute anim aute. Culpa exercitation occaecat anim ad velit velit commodo. Eu est nostrud ad nulla. Ex ipsum irure proident ea incididunt. Proident occaecat veniam nulla pariatur nulla ullamco.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Reprehenderit est enim esse ut id velit enim. Anim labore dolor sint consectetur velit fugiat veniam aute in esse. Cupidatat voluptate eiusmod consequat dolore enim nostrud pariatur irure ipsum voluptate occaecat non. Voluptate mollit consectetur qui pariatur eu veniam consectetur.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Velit deserunt ut ullamco do excepteur consectetur sint eiusmod. Nisi do velit eiusmod exercitation excepteur laborum ex cillum culpa laboris voluptate. Elit duis elit incididunt ad excepteur consequat eiusmod sunt fugiat commodo exercitation aliqua cupidatat. Enim excepteur dolore qui irure velit excepteur ea occaecat dolor tempor eu ex ipsum tempor. Deserunt et velit incididunt ex velit elit labore minim.</p>
    </TkTabsItem>
  </TkTabs>

  <TkTabs orientation="vertical">
    <TkTabsItem label="Tab label" icon="flight">
      <p>Deserunt ad adipisicing do aliqua enim ut culpa qui ad ut tempor. Et elit veniam commodo aliquip nostrud incididunt laboris ex ad laboris non nostrud ea sunt. Aute qui reprehenderit ad est ad ipsum duis. Velit minim ipsum occaecat occaecat aliqua exercitation proident quis dolor enim mollit eiusmod esse. Exercitation magna laboris adipisicing consectetur veniam ex exercitation nisi laboris officia. Consectetur dolor dolor velit occaecat officia dolore occaecat aliquip laboris nisi irure voluptate. Ullamco anim magna est velit proident quis nulla ullamco fugiat.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Nulla cupidatat culpa irure dolore anim ut eiusmod incididunt. Ut Lorem anim eu esse fugiat aliqua quis anim adipisicing fugiat. Mollit reprehenderit irure cillum non ad sint non laborum sit deserunt.</p>
    </TkTabsItem>
    <TkTabsItem label="Tab label" icon="flight">
      <p>Ad dolor excepteur consequat incididunt minim sit quis ipsum fugiat labore pariatur consectetur aliqua. Cupidatat eu exercitation et ex veniam adipisicing laboris eu dolor. Eiusmod deserunt laboris reprehenderit nulla anim enim. Est dolor consequat cillum consectetur. Consequat eiusmod adipisicing est amet incididunt duis eiusmod qui anim excepteur nisi aliquip.</p>
    </TkTabsItem>
  </TkTabs>

<tk-tabs orientation="horizontal">
    <tk-tabs-item label="Tab label" icon="flight">
      <p>Eiusmod nulla excepteur ex esse cupidatat quis minim proident et consequat eu. Officia ut sit aute anim aute. Culpa exercitation occaecat anim ad velit velit commodo. Eu est nostrud ad nulla. Ex ipsum irure proident ea incididunt. Proident occaecat veniam nulla pariatur nulla ullamco.</p>
    </tk-tabs-item>
    <tk-tabs-item label="Tab label" icon="flight">
      <p>Reprehenderit est enim esse ut id velit enim. Anim labore dolor sint consectetur velit fugiat veniam aute in esse. Cupidatat voluptate eiusmod consequat dolore enim nostrud pariatur irure ipsum voluptate occaecat non. Voluptate mollit consectetur qui pariatur eu veniam consectetur.</p>
    </tk-tabs-item>
    <tk-tabs-item label="Tab label" icon="flight">
      <p>Velit deserunt ut ullamco do excepteur consectetur sint eiusmod. Nisi do velit eiusmod exercitation excepteur laborum ex cillum culpa laboris voluptate. Elit duis elit incididunt ad excepteur consequat eiusmod sunt fugiat commodo exercitation aliqua cupidatat. Enim excepteur dolore qui irure velit excepteur ea occaecat dolor tempor eu ex ipsum tempor. Deserunt et velit incididunt ex velit elit labore minim.</p>
    </tk-tabs-item>
  </tk-tabs>

  <tk-tabs orientation="vertical">
    <tk-tabs-item label="Tab label" icon="flight">
      <p>Deserunt ad adipisicing do aliqua enim ut culpa qui ad ut tempor. Et elit veniam commodo aliquip nostrud incididunt laboris ex ad laboris non nostrud ea sunt. Aute qui reprehenderit ad est ad ipsum duis. Velit minim ipsum occaecat occaecat aliqua exercitation proident quis dolor enim mollit eiusmod esse. Exercitation magna laboris adipisicing consectetur veniam ex exercitation nisi laboris officia. Consectetur dolor dolor velit occaecat officia dolore occaecat aliquip laboris nisi irure voluptate. Ullamco anim magna est velit proident quis nulla ullamco fugiat.</p>
    </tk-tabs-item>
    <tk-tabs-item label="Tab label" icon="flight">
      <p>Nulla cupidatat culpa irure dolore anim ut eiusmod incididunt. Ut Lorem anim eu esse fugiat aliqua quis anim adipisicing fugiat. Mollit reprehenderit irure cillum non ad sint non laborum sit deserunt.</p>
    </tk-tabs-item>
    <tk-tabs-item label="Tab label" icon="flight">
      <p>Ad dolor excepteur consequat incididunt minim sit quis ipsum fugiat labore pariatur consectetur aliqua. Cupidatat eu exercitation et ex veniam adipisicing laboris eu dolor. Eiusmod deserunt laboris reprehenderit nulla anim enim. Est dolor consequat cillum consectetur. Consequat eiusmod adipisicing est amet incididunt duis eiusmod qui anim excepteur nisi aliquip.</p>
    </tk-tabs-item>
  </tk-tabs>

Programmatic Control

Tabs can be controlled programmatically using the activeIndex prop.

View Code

React
Vue
Angular

<TkButton label="First Tab" onClick={() => setActiveTabIndex(0)} />
<TkButton label="Second Tab" onClick={() => setActiveTabIndex(1)} />
<TkButton label="Third Tab" onClick={() => setActiveTabIndex(2)} />
...
<TkTabs activeIndex={activeTabIndex} onTkTabChange={(e) => setActiveTabIndex(e.detail)}>
    <TkTabsItem label="First Tab" icon="flight">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate nequequas!</p>
    </TkTabsItem>
    <TkTabsItem label="Second Tab" icon="flight">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate nequequas!</p>
    </TkTabsItem>
    <TkTabsItem label="Third Tab" icon="flight">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate nequequas!</p>
    </TkTabsItem>
</TkTabs>

<TkButton label="First Tab" @click="activeTabIndex = 0" />
<TkButton label="Second Tab" @click="activeTabIndex = 1" />
<TkButton label="Third Tab" @click="activeTabIndex = 2" />
...
<TkTabs :activeIndex="activeTabIndex" @tk-tab-change="(e) => activeTabIndex = e.detail">
    <TkTabsItem label="First Tab" icon="flight">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate nequequas!</p>
    </TkTabsItem>
    <TkTabsItem label="Second Tab" icon="flight">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate nequequas!</p>
    </TkTabsItem>
    <TkTabsItem label="Third Tab" icon="flight">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate nequequas!</p>
    </TkTabsItem>
</TkTabs>

Controlled

Tabs can be controlled via the controlled property.

View Code

React
Vue
Angular

const [activeTab, setActiveTab] = useState(0);

<TkTabs
  activeIndex={activeTab}
  controlled
  onTkTabClick={(e) => setActiveTab(e.detail)}
>
  <TkTabsItem label="Tab label" icon="flight">
    <p className="m-0">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore
      sed consequuntur error repudiandae numquam deserunt quisquam
      repellat libero asperiores earum nam nobis, culpa ratione quam
      perferendis esse, cupiditate nequequas! 1
    </p>
  </TkTabsItem>
  <TkTabsItem label="Tab label" icon="flight">
    <p className="m-0">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore
      sed consequuntur error repudiandae numquam deserunt quisquam
      repellat libero asperiores earum nam nobis, culpa ratione quam
      perferendis esse, cupiditate nequequas! 2
    </p>
  </TkTabsItem>
  <TkTabsItem label="Tab label" icon="flight">
    <p className="m-0">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore
      sed consequuntur error repudiandae numquam deserunt quisquam
      repellat libero asperiores earum nam nobis, culpa ratione quam
      perferendis esse, cupiditate nequequas! 3
    </p>
  </TkTabsItem>
</TkTabs> 

const activeTab = ref(0);

<TkTabs
  activeIndex={activeTab}
  controlled
  onTkTabClick={(e) => activeTab = e.detail}
>
  <TkTabsItem label="Tab label" icon="flight">
    <p className="m-0">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore
      sed consequuntur error repudiandae numquam deserunt quisquam
      repellat libero asperiores earum nam nobis, culpa ratione quam
      perferendis esse, cupiditate nequequas! 1
    </p>
  </TkTabsItem>
  <TkTabsItem label="Tab label" icon="flight">
    <p className="m-0">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore
      sed consequuntur error repudiandae numquam deserunt quisquam
      repellat libero asperiores earum nam nobis, culpa ratione quam
      perferendis esse, cupiditate nequequas! 2
    </p>
  </TkTabsItem>
  <TkTabsItem label="Tab label" icon="flight">
    <p className="m-0">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore
      sed consequuntur error repudiandae numquam deserunt quisquam
      repellat libero asperiores earum nam nobis, culpa ratione quam
      perferendis esse, cupiditate nequequas! 3
    </p>
  </TkTabsItem>
</TkTabs>

Closable

Tabs can be closed separately via is-closable property.

View Code

React
Vue
Angular

<TkTabs isClosable>
  <TkTabsItem label="Tab label" icon="flight">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate nequequas!</p>
  </TkTabsItem>
  <TkTabsItem label="Tab label" icon="flight">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate nequequas!</p>
  </TkTabsItem>
  <TkTabsItem label="Tab label" icon="flight">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate nequequas!</p>
  </TkTabsItem>
</TkTabs>

<TkTabs :isClosable.prop="true">
  <TkTabsItem label="Tab label" icon="flight">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate nequequas!</p>
  </TkTabsItem>
  <TkTabsItem label="Tab label" icon="flight">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate nequequas!</p>
  </TkTabsItem>
  <TkTabsItem label="Tab label" icon="flight">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate nequequas!</p>
  </TkTabsItem>
</TkTabs>

Tabs API

Props

Type	Default	Description
`number`	0	Controls the currently active tab index. Can be controlled programmatically from outside.
`"center", "end", "start"`	'start'	Sets the alignment of the header.
`CSSStyleProperties`	null	The style attribute of container element
`CSSStyleProperties`	null	The style attribute of tabs item element
`boolean`	false	Controls if the tabs component is controlled.
`number`	0	Default Active Index for tabs component.
`CSSStyleProperties`	null	The style attribute of headers container element
`boolean`	false	Controls if tabs are closable.
`boolean`	false	Controls if new tabs can be added or not.
`"horizontal", "vertical"`	'horizontal'	Controls the orientation of the tabs component.
`"base", "large", "small", "xsmall", "xxsmall"`	'base'	Controls the size of the tabs component.
`boolean`	false	Determines whether the tab headers will spread evenly across the horizontal space.
`"basic", "compact", "divided", "expanded"`	'basic'	Controls the tab style of the tabs component.
`"info", "neutral", "primary"`	'primary'	Controls the color variant of the tabs component.

Events

Name	Description
tk-tab-change	Triggered when the currently open tab changes. Returns the active index.
tk-tab-click	Triggered when a tab is clicked. Returns the clicked tab index.

Tabs Item API

Props

Type	Default	Description
`number, string`	null	Sets badge component's count.
`string`	null	Sets badge component's label.
`boolean`	false	Checks if tab item has badge component or not.
`boolean`	null	Whether the tab item is disabled.
`IIconOptions, string`	null	Icon for tabs item component.
`string`	null	Label for the tab item.
`ITooltipOptions`	null	Sets tooltip options for the tab item.

Type​

Basic

Compact

Divided

Expanded

Variants​

Primary

Info

Neutral

Spread Headers​

Align Headers​

Start

Center

End

Sizes​

XSmall

Base

Large

Orientation​

Horizontal

Vertical

Programmatic Control​

Controlled​

Closable​

Tabs API​

Props​

Events​

Tabs Item API​

Props​

Type

Variants

Spread Headers

Align Headers

Sizes

Orientation

Programmatic Control

Controlled

Closable

Tabs API

Props

Events

Tabs Item API

Props