Homecomponentsinformational

Tabs

A container to organize information in switchable tabs.

Use Tabs to show information divided into separate tabs.

Tab Content 1
Open in Playroom

Tabs is purely visual and does not support linking, i.e., it won't change the URL. If you need the tabs to have links and navigate accordingly, use the TabNavigation component.

Orientation

Use the orientation property to choose either vertical or horizontal tab orientation.

Horizontal

Account Content

Vertical

Account Content
Open in Playroom

Count

Use the count property to show a count b adge beside the tab labels.

Recommended Content
Viewed Content
Open in Playroom

Tabs Width In Vertical Orientation

Use tabsWidth property to set custom width to the vertically oriented tabs. It has no effect on horizontally oriented tabs.

Viewed Content
Open in Playroom

API

tabs
Required
The list of tabs.
Tab[]
selected
Required
The tab that is selected.
string
onChange
Required
Called when a tab is selected.
(selection: string) => void
children
Required
The content of the tabs.
ReactNode
orientation
The orientation of the trigger.
horizontal
vertical
space
The space between tabs and conent.
ResponsiveValue
tabsWidth
The width of the tabs in vertical orientaiton.
PxOrRem
data
An object with the data keys and values.
DataAttributeMap
Table of Contents
Orientation
Count
Tabs Width In Vertical Orientation
API