Honeycomb

tab-item

Props

Prop nameTypeDefaultDescription
idstringRequired

The tab id, required for connecting to tab via `aria-labelledby`.

innerRefInnerRefProp<HTMLButtonElement> | undefined

React ref forwarded to the item.

since v. 10.2.0
panelIdstringRequired

The panel id this tab controls, required for connecting to the tab via `aria-controls`.

activeboolean | undefined

Sets the tab as active tab. Sets item active state.

onClickMouseEventHandler<HTMLButtonElement> | undefined
onKeyDownKeyboardEventHandler<HTMLButtonElement> | undefined
aria-labelunknown

Defines a string value that labels the current element. aria-labelledby.

childrenunknown

Text or elements to be displayed as content

extraClassesunknown

Injection in className.

InlineIconunknown

Optional icon, needs to be an svg inline icon component or an InlineIcon shape providing the regular and active versions, like so: `{regular: InlineIcon, active: InlineIcon}`

srOnlyunknown

Visually hidden text after the item text. For screen reader users only.

The TabItem is a specialized NavItem or ProgressTrackerItem component that is meant to be used within a tabbed navigation.

See the Tabs controller for more examples on how to use it.