Tabs

Tabs make it easy to switch between different views.

Import: import { Tabs } from '@kubed/components;'

Source: View source code

Docs: Edit this page

npm: @kubed/components

Documentation

Component Props

Basic Usage

() => (
  <Tabs>
    <Tab label="One" key="one">
      one
    </Tab>
    <Tab label="Two" key="two">
      Two
    </Tab>
    <Tab label="Three" key="three">
      Three
    </Tab>
  </Tabs>
)

1
() => (
2
  <Tabs>
3
    <Tab label="One" key="one">
4
      one
5
    </Tab>
6
    <Tab label="Two" key="two">
7
      Two
8
    </Tab>
9
    <Tab label="Three" key="three">
10
      Three
11
    </Tab>
12
  </Tabs>
13
)
14

Card type tab

() => (
  <>
    <Tabs variant="line">
      <Tab label="One" key="one">
        one
      </Tab>
      <Tab label="Two" key="two">
        Two
      </Tab>
      <Tab label="Three" key="three">
        Three
      </Tab>
    </Tabs>

    <Tabs variant="outline" style={{ marginTop: '50px' }}>
      <Tab label="One" key="one">
        one
      </Tab>
      <Tab label="Two" key="two">
        Two
      </Tab>
      <Tab label="Three" key="three">
        Three
      </Tab>
    </Tabs>
  </>
)

1
() => (
2
  <>
3
    <Tabs variant="line">
4
      <Tab label="One" key="one">
5
        one
6
      </Tab>
7
      <Tab label="Two" key="two">
8
        Two
9
      </Tab>
10
      <Tab label="Three" key="three">
11
        Three
12
      </Tab>
13
    </Tabs>
14

15
    <Tabs variant="outline" style={{ marginTop: '50px' }}>
16
      <Tab label="One" key="one">
17
        one
18
      </Tab>
19
      <Tab label="Two" key="two">
20
        Two
21
      </Tab>
22
      <Tab label="Three" key="three">
23
        Three
24
      </Tab>
25
    </Tabs>
26
  </>
27
)
28

Direction

() => (
  <>
    <Tabs variant="line" direction="vertical">
      <Tab label="One" key="one">
        one
      </Tab>
      <Tab label="Two" key="two">
        Two
      </Tab>
      <Tab label="Three" key="three">
        Three
      </Tab>
    </Tabs>

    <Tabs variant="outline" direction="vertical" style={{ marginTop: '50px' }}>
      <Tab label="One" key="one">
        one
      </Tab>
      <Tab label="Two" key="two">
        Two
      </Tab>
      <Tab label="Three" key="three">
        Three
      </Tab>
    </Tabs>
  </>
)

1
() => (
2
  <>
3
    <Tabs variant="line" direction="vertical">
4
      <Tab label="One" key="one">
5
        one
6
      </Tab>
7
      <Tab label="Two" key="two">
8
        Two
9
      </Tab>
10
      <Tab label="Three" key="three">
11
        Three
12
      </Tab>
13
    </Tabs>
14

15
    <Tabs variant="outline" direction="vertical" style={{ marginTop: '50px' }}>
16
      <Tab label="One" key="one">
17
        one
18
      </Tab>
19
      <Tab label="Two" key="two">
20
        Two
21
      </Tab>
22
      <Tab label="Three" key="three">
23
        Three
24
      </Tab>
25
    </Tabs>
26
  </>
27
)
28

Position

() => (
  <>
    <Tabs variant="line" position="center">
      <Tab label="One" key="one">
        one
      </Tab>
      <Tab label="Two" key="two">
        Two
      </Tab>
      <Tab label="Three" key="three">
        Three
      </Tab>
    </Tabs>

    <Tabs variant="outline" position="right" style={{ marginTop: '50px' }}>
      <Tab label="One" key="one">
        one
      </Tab>
      <Tab label="Two" key="two">
        Two
      </Tab>
      <Tab label="Three" key="three">
        Three
      </Tab>
    </Tabs>
  </>
)

1
() => (
2
  <>
3
    <Tabs variant="line" position="center">
4
      <Tab label="One" key="one">
5
        one
6
      </Tab>
7
      <Tab label="Two" key="two">
8
        Two
9
      </Tab>
10
      <Tab label="Three" key="three">
11
        Three
12
      </Tab>
13
    </Tabs>
14

15
    <Tabs variant="outline" position="right" style={{ marginTop: '50px' }}>
16
      <Tab label="One" key="one">
17
        one
18
      </Tab>
19
      <Tab label="Two" key="two">
20
        Two
21
      </Tab>
22
      <Tab label="Three" key="three">
23
        Three
24
      </Tab>
25
    </Tabs>
26
  </>
27
)
28

grow

() => (
  <Tabs grow variant="line">
    <Tab label="One" key="one">
      one
    </Tab>
    <Tab label="Two" key="two">
      Two
    </Tab>
    <Tab label="Three" key="three">
      Three
    </Tab>
  </Tabs>
)

1
() => (
2
  <Tabs grow variant="line">
3
    <Tab label="One" key="one">
4
      one
5
    </Tab>
6
    <Tab label="Two" key="two">
7
      Two
8
    </Tab>
9
    <Tab label="Three" key="three">
10
      Three
11
    </Tab>
12
  </Tabs>
13
)
14