Tabs

Importing

import {
	Tabs,
	TabsList,
	TabsTab,
	TabsPanel,
} from '@customerio/pluma-components/react';

PlumaTabs renders a group of tab buttons, and accepts their respective contents. The component follows the WAI ARIA APG Tabs pattern. It includes keyboard navigation (left/right arrows, Home and End keys to move between tabs, and Space or Enter to select a tab), as well as accessibility support (via the recommended aria attributes). It is not meant to be used for tabbed navigation where each tab is a link to a different page, or the same page with different query parameters - because links follow different semantic rules. For a tabbed navigation interface that consists of links, please see PlumaTabNav.

PlumaTabs accepts a tabs array of objects, defined by the TabsTabItem interface. A value (a unique id for the tab) and text string content must be provided for each tab. Additionally, the tabs' contents should be provided, wrapped in PlumaTabsPanel components, to associate them with their respective tab buttons (linked via the value string ids).

State

Initial state

An initially selected tab can be chosen by providing the activeTab prop:

Controlled state

The active tab state can be fully controlled by providing both activeTab and onChange:

Note: When onChange is provided, the component will no longer keep track of the active tab internally, and activeTab will need to be set from the callback for the tab state to change.

Alignment

By default, tabs are aligned to the left (the start of the flex container). In some cases, we may need to change the alignment - for example when rendering tabs in a modal where we would like to center them, but still preserve the full-width bottom border.

The TabsList components is built using the InlineStack component, and accepts the same props. In this case, the alignInline prop can control horizontal alignment.

Additionally, TabsList accepts a tabsListAlignInline prop, which is propagated into the TabsList.

Tab icons

An icon can be rendered in a tab by setting the icon key on the tab object. Additionally, the icon's color can be set with iconColor (which should be one of the supported Icon component colors).

Tab badges

A Badge can be rendered in a tab by providing a badge string on the tab object. The string will be rendered inside the badge.

Disabling tabs

A tab can be disabled by setting isDisabled on the tab object:

The entire tab group can be disabled by setting isDisabled on the Tabs component:

Panel variant

The tabs component accepts a variant prop that can be used to change the style of the tabs. The default value is default, while panel is available as an alternative.

The panel variant is meant to be used when the tabs are rendered on top of a panel component. Additionally, enable the withTabs prop on the Panel itself to apply a negative top margin, to make sure the tabs are visually "connected" to the panel.

The "panel" variant tabs also support icons and badges:

Placing the tabs at a different location

By default, the tabs are rendered at the top of the panel. The tabs can by rending the <TabsList> component at a different location within the component tree.

Customizing tabs

Tabs can be customized by using the PlumaTabsList and PlumaTabsTab components. When using these components, a tabs array should not be used, and activeTab along with onChange will need to be provided to control the currently active tab.