Tabs

The tabs component is a simple way to organize content into different sections.

Examples

Each Tab accepts start and end adornments for icons or counts. Added in 10.0.0.


<TabList>
  <Tab start={<InboxIcon />}>Inbox</Tab>
  <Tab end={<Badge>12</Badge>}>Notifications</Tab>
</TabList>

This component is used in the following Blocks:

This component uses the following default theme:

Learn more about how to customize in the Theme documentation.

Name	Type	Default
`className`	`string` The class name to be added to the tabs.
`selectedIndex`	`number` The active index of the tabs.
`defaultIndex`	`number` The default index of the tabs. Default is 0.	`0`
`direction`	`"ltr" \| "rtl"` The direction of the tabs. Default is ‘ltr’.	`'ltr'`
`style`	`CSSProperties` The style to be added to the tabs.
`variant`	`"primary" \| "secondary"` The variant of the tabs.	`'primary'`
`size`	`string` The size of the tabs.	`'medium'`
`onSelect`	`(index: number) => void` The callback to be called when a tab is selected.
`theme`	`TabsTheme` Theme for the Tabs.

Name	Type	Default
`id`	`string` The id of the tab list.
`className`	`string` The class name to be added to the tab list.
`selectedIndex`	`number` The active index of the tabs.
`direction`	`"ltr" \| "rtl"` The direction of the tabs. Default is ‘ltr’.
`onSelect`	`(index: number) => void` The callback to be called when a tab is selected.
`variant`	`"primary" \| "secondary"` The variant of the tabs.	`'primary'`
`size`	`string` The size of the tabs.	`'medium'`
`theme`	`TabsTheme` Theme for the Tabs.

Name	Type	Default
`id`	`string` The id of the tab list.
`containerClassName`	`string` The class name to be added to the tab container.
`className`	`string` The class name to be added to the tab.
`disabled`	`boolean` The disabled state of the tab.
`selected`	`boolean` The selected state of the tab.
`onSelect`	`() => void` The callback to be called when the tab is selected.
`start`	`ReactElement<unknown, string \| JSXElementConstructor<any>>` Element to display before the Button content.
`end`	`ReactElement<unknown, string \| JSXElementConstructor<any>>` Element to display after the Button content.
`size`	`string` The size of the tabs.	`'medium'`
`theme`	`TabsTheme` Theme for the Tabs.

Name	Type	Default
`className`	`string` The class name to be added to the tab panel.
`theme`	`TabsTheme` Theme for the Tabs.