Tabs.Tab accepts an optional
tabKey prop, if included the
tabKey will be included as second argument in the
Add any React node as icon by setting
icon prop on
icon prop is set, it is not necessary to pass
Change color of individual tab by setting
color property to
or change color of all tabs by setting
Color that you pass to these components should be defined in theme.colors.
Tabs controls position is controlled with
grow property is set to true, controls will take 100% of available space
position property is ignored.
In addition to
label props shown before,
Tab component accepts
disabled and any other props from regular button (e.g. style, title, aria-, data-).
color prop will override
color defined in
You can change styles of any element in button component with Styles API to match your design requirements.
To remove all default styles set
variant prop to
Tabs component follows WAI-ARIA recommendations on accessibility:
- Use right and left arrow keys to change tabs when orientation is horizontal
- Use down and up arrow keys to change tabs when orientation is vertical
- Only selected tab control can be focused
- All elements have correct roles: tab, tablist and tabpanel
- aria-orientation is set based off
orientationprop (default is horizontal)