Tabs

Tabs make it easy to explore and switch between different views.

See Reakit for documentation.

Install and import #

Default #

Set the tab activated by default using selectedId on useTabState.

Tab.Panel 1

With no border #

The border on Tab.List is an inset shadow that you can customize or disable via the boxShadow style prop

Tab.Panel 1

With a badge #

Add badges in tab.

Tab.Panel 2

Use another component #

Use another component in tab.

Tab.Panel 1

One tab #

Active bar doesn't display with only one tab.

Tab.Panel 1

Vertical #

Set the tab orientation by providing the orientation prop to the tab state

Tab.Panel 2

Properties #

Tab #

NameType(s)DefaultRequired
as
union
children
node
id
string

Tab.List #

NameType(s)DefaultRequired
as
union
children
node
orientation
vertical
horizontal

Tab.Panel #

NameType(s)DefaultRequired
as
union
children
node
orientation
vertical
horizontal
tabId
string

Dependencies #

Peer dependencies #