Tabs
Horizontal tab navigation with five visual variants. Supports icon, badge per tab, disabled state, full-width mode, and size variants.
import
{ Tabs } from "@pepulux/ui"Underline (default)
Bottom-border active indicator. The most common variant for page-level navigation.
Button border
Pill/card style inside a gray container. Active tab gets a white card with shadow.
Button brand
Active tab is filled with the brand color. High contrast for feature toggles.
Button gray
Active tab uses a light gray fill — subtler than brand.
Button minimal
No container background. Active tab uses brand text color only.
With icons and badges
Pass icon and badge to the Tab object. Badge renders a small count pill.
Disabled tab
Individual tabs can be disabled — they appear dimmed and are not clickable.
Full width
Tabs stretch to fill the available container width.
Size — sm (compact)
Smaller tab height — useful in sidebars or dense layouts.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| tabs* | Tab[] | — | Array of { id, label, content?, badge?, icon?, disabled? } |
| variant | "underline" | "button-border" | "button-brand" | "button-gray" | "button-minimal" | "underline" | Visual style |
| activeTab | string | — | Controlled active tab id |
| defaultTab | string | — | ID of the initially active tab (uncontrolled) |
| onChange | (id: string) => void | — | Called when active tab changes |
| size | "sm" | "md" | "sm" | Tab height and font size |
| fullWidth | boolean | false | Stretch tabs to fill available width |
| className | string | — | Additional CSS classes on the tab container |