tab-item

Props

Prop name	Type	Default	Description
`id`	`string`	`Required`	The tab id, required for connecting to tab via `aria-labelledby`.
`innerRef`	`InnerRefProp<HTMLButtonElement> \| undefined`		React ref forwarded to the item. since v. 10.2.0
`panelId`	`string`	`Required`	The panel id this tab controls, required for connecting to the tab via `aria-controls`.
`active`	`boolean \| undefined`		Sets the tab as active tab. Sets item active state.
`onClick`	`MouseEventHandler<HTMLButtonElement> \| undefined`
`onKeyDown`	`KeyboardEventHandler<HTMLButtonElement> \| undefined`
`aria-label`	`unknown`		Defines a string value that labels the current element. aria-labelledby.
`children`	`unknown`		Text or elements to be displayed as content
`extraClasses`	`unknown`		Injection in className.
`InlineIcon`	`unknown`		Optional icon rendered before the text, needs to be an svg inline icon component or an InlineIcon shape providing the regular and active versions, like so: `{regular: InlineIcon, active: InlineIcon}`
`InlineIconAfter`	`unknown`		Icon render after the text, needs to be an svg inline icon component or an InlineIcon shape providing the regular and active versions, like so: `{regular: InlineIcon, active: InlineIcon}`
`srOnly`	`unknown`		Visually hidden text after the item text. For screen reader users only.
`divider`	`unknown`		Shows a divider between the items. @since 16.7.0 since v. 16.7.0

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.