Tabs

A set of panels where one section is visible at a time.

#Import

import { Tabs, TabsList, TabsTrigger, TabsContent } from 'bmates-ui';

#Basic usage

The example below mirrors the primary Storybook composition and can be used as a starting point.

<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="activity">Activity</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">Project overview</TabsContent>
  <TabsContent value="activity">Recent activity</TabsContent>
</Tabs>

#Preview

<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="activity">Activity</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">Project overview</TabsContent>
  <TabsContent value="activity">Recent activity</TabsContent>
</Tabs>

#Prop previews

The examples below isolate the props that change visual output or interaction.

#Controlled value

<Tabs value={value} onValueChange={setValue} defaultValue="profile">...</Tabs>

#Size

<Tabs size="lg" defaultValue="profile">...</Tabs>

#Disabled tab

<TabsTrigger value="settings" disabled>Settings</TabsTrigger>

#Component API

#Usage notes

• Every component in the table is exported from bmates-ui.
• Unless noted otherwise, a component also accepts the standard props of its underlying HTML element.
• For application-owned state, use a controlled value and its change handler instead of only a default* prop.