Component size, gzipped: 17kb
This component is deprecated and will be removed in our next major version, slated for late 2021. We recommend using our new Tabs (Motion) component. It has an animated highlight and is compliant with the WAI-ARIA 1.1 Specification. The APIs are almost identical so give it a try!
Tabs
The Tabs component is used for navigating frequently accessed, but distinct categories.
Accessibility
tab
,shift + tab
- to move focus between tabs.Space
orEnter
- to display the selected tab's contentaria-selected
,aria-disabled
are applied to the tabs.- Roles:
role=tab
,role=tablist
,role=tabpanel
Examples
We use tab order to provide default keys for each tab. You can however, pass in your own key to a tab and set activeKey
accordingly.
API
Tabs props
Name | Type | Description |
---|---|---|
activeKey | string | Key of the the tab to be selected. |
children | react node | An array of Tab components. |
disabled | boolean | True when all tabs are disabled. |
onChange | function | Change handler that is called every time a new tab is selected. |
orientation | enum | The orientation of the tab component. |
overrides | custom | Lets you customize all aspects of the component. |
renderAll | boolean | Renders all tab content for SEO purposes regardless of tab active state. |
Tabs exports
You can import this module like so:
import {Tabs} from 'baseui/tabs'
It exports the following components or utility functions: