TabsSubtle

Tab navigation with smooth pill animations.

Installation

Basic

Teamspaces content goes here.

With Icons

Teamspaces content goes here.

Active Label

Teamspaces content goes here.

API Reference — TabsSubtle

PropTypeDefaultDescription
selectedIndexnumberIndex of the currently selected tab.
onSelect(index: number) => voidCalled when a tab is selected.
idPrefixstringPrefix for ARIA IDs linking tabs to panels.
activeLabelbooleanfalseWhen true, only the selected tab shows its text label. Requires icons on tabs.
childrenReactNodeTabsSubtleItem children.

API Reference — TabsSubtleItem

PropTypeDefaultDescription
iconIconComponentIcon displayed in the tab.
labelstringText label for the tab.
indexnumberPosition index within the tab list.

API Reference — TabsSubtlePanel

PropTypeDefaultDescription
indexnumberIndex of this panel.
selectedIndexnumberCurrently selected tab index.
idPrefixstringMust match the TabsSubtle idPrefix.
childrenReactNodePanel content, only rendered when selected.