Tabs

An accessible tabbed navigation component with line and pill visual variants.

Import

import { Tabs } from '@synapse-ui/tabs';

Basic Usage

tabs = [
  { id: 'overview', label: 'Overview' },
  { id: 'settings', label: 'Settings' },
  { id: 'members', label: 'Members', disabled: true },
];

<synapse-tabs [tabs]="tabs" [activeTab]="currentTab" (tabChange)="currentTab = $event">
  <!-- panel content here -->
</synapse-tabs>

Inputs

Input	Type	Default	Description
tabs	TabItem[]	[]	Tab definitions (id, label, disabled?)
activeTab	string | undefined	—	ID of the active tab (defaults to first)
variant	'line' | 'pill'	'line'	Visual style of the tab strip

Outputs

Output	Payload	Description
tabChange	string	Emits the id of the newly selected tab