Component size, gzipped: 14kb

Tabs

Loading
API

The Tabs component is used for navigating frequently accesssed, but distinct categories.

Accessibility

  • tab, shift + tab - to move focus between tabs.
  • Space or Enter - to display the selected tab's content
  • aria-selected, aria-disabled are applied to the tabs.
  • Roles: role=tab, role=tablist, role=tabpanel

Examples

Controlled Tabs Usage

Tab Content 1

Uncontrolled Tabs Usage

Tab 1 content

Tabs SEO Friendly

Tab 1 content
Tab 2 content
Tab 3 content

Tabs Vertical Usage

Tab 3 content

Tabs Overrides

Tab Content 1

API

Tabs props

Tabs exports

You can import this module like so:

import {Tabs} from 'baseui/tabs'

It exports the following components or utility functions: