Tabs

<ts-tabs> vv0.4.0

The ts-tabs component.

Open in Storybook for interactive demos.

Preview

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

Properties

Property	Attribute	Type	Default	Description
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.

Events

Event	Detail	Bubbles	Composed	Description
tsChange	{ value: string; }	Yes	Yes	Emitted when the active tab changes.

Slots

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

CSS Parts

Use ::part() to style internal elements:

Part	Description
panels	The panel container.
tab	Each individual tab button.
tab-active	The currently active tab button.
tablist	The tab button container.

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

Usage

HTML

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

React

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

<TsTabs size="md" variant="line">Content</TsTabs>