Tabs beta
beta
Tabs are used to organize content and data sets into different views.
Navigational Tabs
Tabs props
| Name | Default value | Type | Is required? | Description |
|---|---|---|---|---|
label | string | No | The aria label for the tabs | |
children | ReactNode | Yes | Only one or more Tab components should be provided as children | |
onChange | (selectedId?: string) => void | No | The onChange handler for Tablist implmenetations | |
selectedId | string | No | The ID of the currently selected Tab in Tablist implmentations | |
currentPath | string | No | The the path of the current page to matched against the href props in your Tab components for navigational implementations | |
isNavigation | true | No | Render the Tabs as a nav with links instead of a tablist |
Tab props
| Name | Default value | Type | Is required? | Description |
|---|---|---|---|---|
label | string | Yes | The label of your Tab | |
iconName | "Activity" | "AlignedCenter" | "AlignedLeft" | "AlignedRight" | "AnyFile" | "Archive" | "Audio" | "BackArrow" | "Bold" | "BrochureDownload" | "Building" | "BuildingList" | "BuildingSmall" | ... 118 more ... | "Xls" | No | Name of icon to be displayed in your tab | |
id | string | No | Unique ID of your tab | |
tabPanelId | string | No | id of tabpanel that this tab controls | |
href | string | No | Path to navigate to when tab is clicked |