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, 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. |
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.