Tabs

<ts-tabs> vv0.6.3

The ts-tabs component.

Open in Storybook for interactive demos.

Preview

<ts-tabs orientation="horizontal" size="md" variant="line">Content</ts-tabs>

Property	Attribute	Type	Default	Description
`closable`	`closable`	`boolean`	`false`	Whether tabs display a close button.
`orientation`	`orientation`	`"horizontal" \| "vertical"`	`'horizontal'`	The orientation of the tab bar.
`scrollable`	`scrollable`	`boolean`	`false`	Whether the tab list is scrollable on overflow.
`size`	`size`	`"lg" \| "md" \| "sm"`	`'md'`	The size of the tab buttons.
`value`	`value`	`string \| undefined`	—	The value of the currently active tab.
`variant`	`variant`	`"enclosed" \| "line" \| "pill"`	`'line'`	Visual variant of the tab bar.

Event	Detail	Bubbles	Composed	Description
`tsChange`	`\{ value: string; \}`	Yes	Yes	Emitted when the active tab changes.
`tsClose`	`\{ value: string; \}`	Yes	Yes	Emitted when a tab’s close button is clicked.

Name	Description
`(default)`	Default slot for `ts-tab-panel` children.

Use ::part() to style internal elements:

Part	Description
`close`	The close button inside closable tabs.
`panels`	The panel container.
`tab`	Each individual tab button.
`tab-active`	The currently active tab button.
`tablist`	The tab button container.

ts-tabs::part(close) {
  /* your custom styles */
}

<ts-tabs orientation="horizontal" size="md" variant="line">Content</ts-tabs>

import { TsTabs } from '@tessera-ui/react';

<TsTabs orientation="horizontal" size="md">Content</TsTabs>