Tabs

Tabs are used to group content, allowing users to navigate views without leaving the page.

React

released

Vue

released

Elements

unsupported

Android

unsupported

iOS

unsupported

Examples

Example theme:

DBA lightFinn lightTori light

Usage

Design Guidelines

See Figma: Warp - Components / Tabs

Accessibility

Focus management and ARIA attributes are handled automatically.

Warning

The name attributes will be used to generate id attributes (prefixed with warp-tab- and warp-tabpanel-), and therefore they must be unique throughout the entire DOM. This is because aria-controls and aria-labelledby rely on id attributes, and they are required for the tabs to be ARIA compliant.

Questions?

Feel free to ask any questions on usage in the Warp DS Slack channel: #nmp-warp-design-system

Frameworks

Import

You can import the component like so:

import { Tab, Tabs, TabPanel } from '@warp-ds/react';

or import it individually to optimize your JS bundle size by adding only the components you need:

import { Tab, Tabs, TabPanel } from '@warp-ds/react/components/tabs';

Syntax

The following example demonstrates how the Tabs, Tab and TabPanel components can be used to switch between panels.

<>
  <Tabs>
    <Tab label="Tab 1" name="one" isActive />
    <Tab label="Tab 2" name="two" />
    <Tab label="Tab 3" name="three" />
  </Tabs>
  <div>
    <TabPanel name="one">Tab one selected!</TabPanel>
    <TabPanel name="two">Tab two selected!</TabPanel>
    <TabPanel name="three">Tab three selected!</TabPanel>
  </div>
</>

Tabs with left icons

function Example() {
  const svgicon = (
    <svg
      width="16"
      height="14"
      viewBox="0 0 16 14"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d= /* string */
        fill="#474445"
      />
    </svg>
  );

  return (
    <Tabs>
      <Tab label="Tab 1" name="one" isActive>
        {svgicon}
      </Tab>
      <Tab label="Tab 2" name="two">
        {svgicon}
      </Tab>
      <Tab label="Tab 3" name="three">
        {svgicon}
      </Tab>
    </Tabs>
  );
}

Tabs with icons over the label

function Example() {
  const svgicon = (
    <svg
      width="16"
      height="14"
      viewBox="0 0 16 14"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d= /* ... */
        fill="#474445"
      />
    </svg>
  );

  return (
    <Tabs>
      <Tab label="Tab 1" name="one" over isActive>
        {svgicon}
      </Tab>
      <Tab label="Tab 2" name="two" over>
        {svgicon}
      </Tab>
      <Tab label="Tab 3" name="three" over>
        {svgicon}
      </Tab>
    </Tabs>
  );
}

Technical details

You can set the active tab in one of two ways:

1. By passing the name of the active Tab to the Tabs component using the active attribute.
2. By setting isActive on the active Tab. The first Tab is active by default if you don't specify an active Tab.

Warning

It is important that all children of Tabs are Tab components.

Props - Tabs

Required props

name	type	default	notes
children	Element[]		The Tabs within the container

Optional Props

name	type	default	notes
active	string		Used to set the name of the Tab that should be active on mount. Defaults to the first tab if not present and isActive is not set on any Tab
className	string		Additional CSS class for the container
style	any		Additional CSS styles for the container

Events

name	when
onChange	(name: string) => void		Handler that is called when the tab changes

Props - Tab

Required props

name	type	default	notes
name	string		Tab name identifier. This value will be omitted as the argument to the Tabs onChange handler
label	any		The label of the tab item

Optional Props

name	type	default	notes
isActive	boolean		Used to set which tab should be active on mount. Defaults to the first tab if not present
over	boolean	false	Set the over prop to true if you need to move icons to above the tab label
className	string		Additional CSS class for the container
style	any		Additional CSS styles for the Tab

Events

name	when
setActive	(name: string)	false
onChange	(name: string) => void		Action to be called when the component is clicked

Props - TabPanel

Required props

name	type	default	notes
children	ReactNode		The content of the tab panel.
name	string		Tab name identifier - This value should be the same as the name prop of the corresponding Tab component.

Optional Props

name	type	default	notes
hidden	boolean		Show/hide panel manually (in server-side rendering).