Components

Tab Bar

Displays a tab bar to switch different views

Selected Theme

Select brand or tribe name to preview style

Default

Usage

Tabs organize content across different screens, data sets, and other interactions.

import { TabItem, TabWrapper } from 'legion-ui';

Variant

Horizontal

Doing so with Horizontal orientation by parsing horizontal value to the variant property.

import React from "react";
import { Card, TabWrapper, TabItem } from "legion-ui";
import { navigate } from "gatsby";

const TabbarHorizontal = () => {
  const handleClickTab = () => navigate("https://legion.telkom.design/");
  return (
    <div style={{ marginBottom: "30px", width: "630px" }}>
      <h4>Horizontal</h4>

Vertical

You can also have vertical Tab Bar and expect results! Give the variant property a value of vertical.

Product

Detail

Variant

Color Option4

import React from "react";
import { Card, TabWrapper, TabItem } from "legion-ui";

const TabbarVertical = () => {
  return (
    <div style={{ marginBottom: '30px', width: '630px' }}>
      <h4> Vertical </h4>
      <Card style={{ paddingLeft: '24px' }}>
        <TabWrapper style={{ marginRight: '24px' }} variant="vertical" tabName="tabTwo">

Props

TabWrapper

property	propType	required	default	description
tabName	string	✓	-	Sets and identify the name of Tab Bar
variant	`horizontal` \| `vertical` \| -	`horizontal`	Sets position of the Tab Bar

TabItem

property	propType	required	default	description
badgeNumber	string	-	-	Show badge number to the right side of Tab Bar item
icon	IconName from react-feather	-	-	Sets icon of Tab Bar item
id	string	✓	-	Sets id of Tab Bar item
isActive	boolean	-	`false`	Sets status of Tab Bar item
isDisabled	boolean	-	`false`	Sets disable state to a Tab Bar item
label	string	-	-	Sets label of Tab Bar item
onClick	`(e:React.ChangeEvent<HTMLInputElement>) => void`	-	-	Define tab bar onClick event. This will turn tab bar into clickable mode (pressed state)

Do you have feedback?

Please let us know to make it better

Send Feedback