Components / Tabs
Tabs
Tabbed navigation with animated sliding indicator bar, pills variant with shadow, count badges, size variants, and full keyboard nav (arrows/home/end).
navigation v0.1.0
Playground
Examples
Underline (default)
<cg-tabs></cg-tabs>Pills
<cg-tabs variant="pills"></cg-tabs>Pills (full rounded)
<cg-tabs variant="pills" rounded="full"></cg-tabs>With counts
<cg-tabs></cg-tabs>Import
import { CgTabs } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-tabs';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
tabs | TabItem[] | — | Tab definitions — {value, label, icon?, disabled?, count?} |
value | string | "" | Active tab value (defaults to first tab) |
variant | "underline" | "pills" | "underline" | Visual variant — underline has sliding indicator, pills has background highlight |
rounded | "default" | "full" | "default" | Border radius — full makes pills capsule-shaped |
size | "sm" | "md" | "lg" | "md" | Tab size |
Events
| Event | Detail | Description |
|---|---|---|
cg-tab-change | {value: string, label: string} | When a tab is selected |