Tabs
Allows users to navigate between different views within the same context.Prop | Required | Description | Type |
|---|---|---|---|
children | ✅ | Pass in <TabList> and <TabPanel/>s as children. | ReactElement<TabListProps | TabPanelProps, string | JSXElementConstructor<any>>[] |
defaultValue | — | Set which tab should be initially activated by setting defaultValue to the same as the relevant TabItem's value. Use when you do not need to control the state of the tabs. | string |
activationMode | — | Set whether the tab panel should render automatically (when focusing on the tab item), or manually (after pressing the tab item). Defaults to automatic. | "automatic" | "manual" |
value | — | The controlled value of the tab to activate. Should be used in conjunction with onValueChange when controlling the tabs with your own state. | string |
onValueChange | — | Event handler called when the value changes. Use in conjunction with the value prop when controlling the tabs with your own state. | (value: string) => void |
Prop | Required | Description | Type |
|---|---|---|---|
children | ✅ | Pass in <TabItem />s as children. | ReactElement<TabItemProps, string | JSXElementConstructor<any>>[] |
alignment | — | Control the alignment of the tab items. Defaults to start. | "start" | "center" | "stretch" |
containerPadding | — | Pass the Tabs' ancestor container's padding to make the Divider and ScrollWrap stretch out to the edges of the container. | string | numberSupports responsive prop syntax |
dividerHidden | — | Optionally hide the divider. Use if implementing your own <Divider /> outside of the TabList. Defaults to false. | boolean |
loop | — | Make the tab item keyboard navigation "loop", i.e. when you reach the last item and press right arrow it will loop back to focus the first item. Defaults to true. | boolean |
Prop | Required | Description | Type |
|---|---|---|---|
label | ✅ | Provide a clear and concise label for the tab. | string |
labelMaxWidth | — | Set the max width of the tab's label, truncating any overflowing text. Defaults to 11rem. | string | numberSupports responsive prop syntax |
badge | — | Optionally pass in an object of BadgeProps to display a <Badge /> in the TabItem. | BadgeProps |
numberBadge | — | Optionally pass in an object of NumberBadgeProps to display a <NumberBadge /> in the TabItem. | NumberBadgeProps |
href | — | Pass in a href that the tab should link to. NOTE: This is a required prop when not utilising the value prop. | string |
shouldIgnoreCoreLinkComponent | — | Option to ignore the global link override on a case by case basis. Doing this will render the link as a normal <a>-element even if a linkComponent in <Core /> is defined. | boolean |
value | — | Pass in a value to connect to the TabPanel with the same value. NOTE: This is a required prop when not utilising the href prop. | string |
isCurrentPage | — | Gives the tab an active style to visually indicate that this is the current page being viewed. NOTE: Only relevant if utilising the href prop (navigational tabs). | boolean |
disabled | — | Optionally set the tab to disabled. NOTE: Only relevant if utilising the value prop (semantic tabs). | boolean |
Prop | Required | Description | Type |
|---|---|---|---|
value | ✅ | Pass in a value to connect to the TabItem with the same value. | string |