PaneTabs
Stripe TabsLine tabs over a record's working pane. The active tab takes the brand colour and a 2px underline that slides (200ms) while the panel cross-fades; the page's main button and ⋯ More sit at the right end of the tab row. Arrow keys, Home and End move between tabs.
Three tabs with an action
Sandeshtech sends every SMS for this account.
When to use
- Splitting a record's working pane into kinds of work: Overview, Activity, Settings.
Not for
- Switching a chart's period — use ButtonGroup.
Props
| Prop | Type | Description |
|---|---|---|
| tabs | { value, label, content, disabled? }[] | The tabs and their panels. |
| value / onValueChange | string / (v) => void | Controlled tab. |
| defaultValue | string | Starting tab when uncontrolled. |
| actions | ReactNode | At the right end of the tab row. |
| size | "default" | "sm" Default "default" | sm for tabs inside a section. |
| aria-label | string | Names the tab list. |
| className | string | Extra classes on the outer element. |