Tabs Component Playground

Interactive playground to test all Tabs props and variants

Props

Variant

Tabs style variant

Size

Tab size variant

Show Border Line

Full-width border line below tabs (Figma default: true)

Full Width

Stretch tabs to fill container (Auto vs Full)

Active Tab

Currently selected tab

Add New Tab

Tab Items

Finops view

tab1

Engineering view

tab2

Current State

Active Tab: tab1

Total Tabs: 2

Preview

Code

<Tabs
  items={[
    { value: "tab1", label: "Finops view" },
    { value: "tab2", label: "Engineering view" }
  ]}
  value="tab1"
  onValueChange={(value) => { /* handle change */ }}
/>

Props (JSON)

{
  "items": [
    {
      "value": "tab1",
      "label": "Finops view"
    },
    {
      "value": "tab2",
      "label": "Engineering view"
    }
  ],
  "value": "tab1",
  "onValueChange": "(function)",
  "variant": "bordered",
  "size": "small",
  "showBorder": true,
  "fullWidth": false
}

Examples

Bordered Small (Default)

Bordered Large

Bordered with Border Line (Small) - Figma default

Bordered Full Width (Large)

Filled Small

Filled Large

Filled Full Width (Small)

With Disabled Tab (Bordered Small)