Tabs

Reduce visual complexity of long forms using tabs.

Use TabNav for navigation links styled as tabs.

#Example

#Usage

#Decorators: 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 countFormatter prop to change the way the count is rendered.
• Add the badgeVariant prop to change the variant of the badge 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.

#Loading

Tabs have their own loading state when used with the Skeleton component.

#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.

#Accessibility

It is important to directly nest Tab within the parent TabList. Any intermediate elements will break a11y compliance.

#Props

#Tabs

Inherits margin props.

Name	Default	Description

#TabList

Name	Default	Description
children	—	ReactNode Tabs.

#Tab

Name	Default	Description
badgeVariant	—	BadgeProps["variant"] The variant of the badge if a count is provided.
children	—	string Tab title.
count	—	number Optional count to display near the title.
countFormatter	—	(count: number) => string | number Optional function to format the count.
tooltip	—	Omit<TooltipProps, "children"> Optional tooltip to add to the text.
statusIndicator	—	ReactNode Optional status indicator to place to the right of the text.
isDisabled	false	boolean If tab is disabled.

#TabPanels

Name	Default	Description
children	—	ReactNode Tab panels.

#TabPanel

Name	Default	Description
children	—	ReactNode Tab content.