Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Tabs

v.1.0.0 | Saturn
Healthy
StorybookGithubFigma

Set of sections used to navigate between related pages or views at the same level of hierarchy.

import { Tabs } from '@kubit-ui-web/react-components'
12345
<Tabs
  variant="DEFAULT"
  tabs={[{ content: 'option 1' }, { content: 'option 2' }, { content: 'option 3' }]}
  content={['Content option 1', 'Content option 2', 'Content option 3']}
/>

Variant

In Kubit Design System, users have the freedom to generate variants for each component according to their needs. While predefined variants are provided as examples, they can be modified or new ones can be added to align with the specific requirements of each project.

We have set this predefine style for its quick use, access them through the variant prop:

123456789
<div>
  <Tabs
    variant="DEFAULT"
    leftIcon={{ icon: 'ICON_PLACEHOLDER' }}
    rightIcon={{ icon: 'ICON_PLACEHOLDER' }}
    tabs={[{ content: 'option 1' }, { content: 'option 2' }, { content: 'option 3' }]}
    content={['Content option 1', 'Content option 2', 'Content option 3']}
  />
</div>

Icon

A leftIcon or a rightIcon can be added if there are more than 3 tabs in a small display in order to move between them.

123456789
<div>
  <Tabs
    variant="DEFAULT"
    leftIcon={{ icon: 'ICON_PLACEHOLDER' }}
    rightIcon={{ icon: 'ICON_PLACEHOLDER' }}
    tabs={[{ content: 'option 1' }, { content: 'option 2' }, { content: 'option 3' }]}
    content={['Content option 1', 'Content option 2', 'Content option 3', 'Content option 4']}
  />
</div>
Stepper progressStyling API
TabsDesign Specs