Tab

A single tab inside a `Tabs` tablist; renders as a link when `href` is provided, otherwise as a button.

Props

React props
NameTypeRequiredDefaultDescription
classNamestring | ClassNameComponent<TabInterface>NoClasses or state-aware element classes applied through the shared style contract.
labelstringNoText shown for this tab; can also come from a string child.
iconIconNoIcon shown alongside the label.
disabledbooleanNofalseDisables pointer, keyboard, and roving-tabindex focus for this tab.
variantTabsVariantNo'primary'Injected by the parent Tabs.
indexnumberNoInjected by the parent Tabs: position of this tab in the list.
selectedTabnumberNoInjected by the parent Tabs: index of the currently selected tab.
tabsIdstringNoInjected by the parent Tabs: identifier shared by every tab and panel of the group.
hrefstringNoNavigation destination; switches the inner element to a native link.
isFocusablebooleanNofalseInjected by the parent Tabs: this tab is the roving-tabindex stop while nothing is selected.
hasPanelsbooleanNofalseInjected by the parent Tabs: whether a connected TabPanels exists (wires aria-controls).
onTabSelect(index: number) => voidNoInjected by the parent Tabs: requests this tab becomes selected.
contentRef(element: HTMLSpanElement) => voidNoInjected by the parent Tabs: reports this tab's icon+label content element, which the sliding indicator measures for the `primary` variant.