Tabs

Reduce visual complexity of long forms using tabs.

#Example

#Usage

#Counts, tooltips, and status indicators

Add the following props to a Tab to add decorations to the tab:

• Add the count prop to display a gray badge with the count within the Tab.
• Add the tooltip prop to add a tooltip to the text.
• Add the statusIndicator prop to add an extra indicator to the right of the Tab text.

Use these instead of directly rendering additional components within the Tab itself.

#Controlled

There are cases when state of tabs is managed elsewhere. For example, when tabs are switched based on the current URL.

#Guidelines

#When to use

• When there are many related sections and one section needs to be shown at a time.

#When not to use

• When content from multiple tabs needs to be shown at the same time.
• As a way to indicate progress of filling out a form or a similar component.
• As a way to filter content.

#Content

• Use sentence case for tab titles.
• Keep tab titles to 3 words max.

#Props

#Tabs

Inherits margin props.

Name	Default	Description

#TabList

Name	Default	Description
children	—	ReactNode Tabs.

#Tab

Name	Default	Description

#TabPanels

Name	Default	Description

#TabPanel

Name	Default	Description