Tabs

Organize related content into tabbed views with TabList, Tab, TabPanel, and TabItem.

Introduction

Tabs organize related content into tabbed views. Compose with TabList, Tab, and TabPanel, or use the TabItem shortcut. The selected tab uses a quiet surface from variant; color optionally tints selected text and the line / solid / enclosed indicator.

Use the framework selector in the site header to switch between React and Vue.

Import

import { Tabs } from "@bridge-ui/vue/Components/Tabs";
import { Tab } from "@bridge-ui/vue/Components/Tab";
import { TabItem } from "@bridge-ui/vue/Components/TabItem";
import { TabList } from "@bridge-ui/vue/Components/TabList";
import { TabPanel } from "@bridge-ui/vue/Components/TabPanel";

import { Tabs } from "@bridge-ui/react/Components/Tabs";
import { Tab } from "@bridge-ui/react/Components/Tab";
import { TabItem } from "@bridge-ui/react/Components/TabItem";
import { TabList } from "@bridge-ui/react/Components/TabList";
import { TabPanel } from "@bridge-ui/react/Components/TabPanel";

Basic usage

Control selection with value / onChange (React) or v-model (Vue). Each Tab and TabPanel shares a value.

TabItem shortcut

TabItem renders both the tab trigger and its panel. Pass label for the trigger and children for the panel content.

Icons

Pass icons with startIcon / endIcon, or custom nodes via slots.start / slots.end.

Colors

Use the color prop to optionally tint selected text (and the line / solid / enclosed indicator). The selected surface comes from variant. Available colors: primary, secondary, success, info, warning, error, dark, and black.

Variants

Available variants: pill (default), line, plain, solid, and enclosed. Pair with any color from the palette above.

Vertical

Set orientation="vertical" for a side-aligned tab list.

Manual activation

With activation="manual", arrow keys move focus without changing the selected tab until Enter or Space.

Nested customProps

With TabItem, Tabs maps list/triggers/panels and merges customProps.tabList, customProps.tab, and customProps.tabPanel. Item-owned props (value, icons, label, keepMounted, panel content) are not overridable via nested customProps. TabItem slots are not shallow-merged from customProps.tab.

<Tabs
  defaultValue="bun"
  customProps={{
    tabList: { className: "gap-2" },
    tab: { classes: { root: "px-3" } },
  }}
>
  <TabItem label="bun" value="bun">
    bun install
  </TabItem>
  <TabItem label="npm" value="npm">
    npm install
  </TabItem>
</Tabs>

Related components

Badge, Avatar, Icon, Toggle Group, Stepper

API

Tabs

Tab

TabList

HTML attributes on the role="tablist" container (aria-label, className, etc.).

TabPanel

TabItem