Tabs

Usage

Tabs let you switch between different sections. Use only one type of tab (primary or secondary) in each tab bar.

Primary Tabs

videocam Videos

palette Theme

settings Setttings

<Tabs value="videos">
	<Tab value="videos">{#snippet icon()}<Icon>videocam</Icon>{/snippet}Videos</Tab>
	<Tab value="theme">{#snippet icon()}<Icon>palette</Icon>{/snippet}Theme</Tab>
	<Tab value="settings">{#snippet icon()}<Icon>settings</Icon>{/snippet}Setttings</Tab>
</Tabs>

Secondary Tabs

videocam Videos

palette Theme

settings Setttings

<Tabs value="videos">
	<Tab variant="secondary" value="videos">
		{#snippet icon()}<Icon>videocam</Icon>{/snippet}Videos
	</Tab>
	<Tab variant="secondary" value="theme">
		{#snippet icon()}<Icon>palette</Icon>{/snippet}Theme
	</Tab>
	<Tab variant="secondary" value="settings">
		{#snippet icon()}<Icon>settings</Icon>{/snippet}Setttings
	</Tab>
</Tabs>

Selection

The value prop on <Tabs> determines which tab is currently selected. Each <Tab> must have a unique value within the same <Tabs> group. When the value of <Tabs> matches a <Tab>'s value, that tab is highlighted as selected. To react to tab changes, use bind:value on <Tabs> to keep track of the selected tab in your component state.

Videos

Theme

Setttings

Selected Tab: videos

<Tabs bind:value>
	<Tab value="videos">Videos</Tab>
	<Tab value="theme">Theme</Tab>
	<Tab value="settings">Setttings</Tab>
</Tabs>
<div>Selected Tab: {value}</div>

API

Tabs

Bindables

Attribute	Type	Description
`value`	`number \| string`	Value of the current tab.
`element`	`HTMLSpanElement`	A reference to the root DOM element of the component. This variable is bound using `bind:this`, allowing direct access to the underlying HTML element for manipulation or querying within the component's logic.

Tab

Attributes

Attribute	Type	Default	Description
`variant`	`'primary' \| 'secondary'`	`undefined`	Sets the visual style of the tab. Use `'primary'` for the default appearance or `'secondary'` for an alternative style.
`inlineIcon`	`boolean`	`false`	Only affects the `primary` variant.
`value`	`number \| string`	`undefined`	The value associated with this tab. Used to identify which tab is selected.
`icon`	`Snippet \| undefined`	`undefined`	Provides a custom icon for the tab, typically rendered before the tab label. Accepts a Svelte snippet, such as an `<Icon>` component.
`href`	`string`	`undefined`	When set, the tab will render as a link using the provided URL. This allows navigation to other pages or routes when the tab is clicked.