Tabs

Tabs is a linear set of two or more items, each of which presents a mutually exclusive link.

Use Tabs to alternate among related views within the same context and at the same level of hierarchy ⏤ e.g. within a Tile or Panel. Tabs and Segmented Buttons are very similar, decide depending on the context.

Example

Live Editor

function MyTabs() { const items = [ { id: '1', label: 'Examples', href: '#' }, { id: '2', label: 'Components', href: 'https://atlas.adjust.com/docs/components/introduction' }, { id: '3', label: 'Design Tokens', href: 'https://atlas.adjust.com/docs/design-tokens/introduction' }, { id: '4', label: 'Patterns', href: 'https://atlas.adjust.com/docs/patterns/introduction' } ]; return <Tabs items={items} value="1" />; }

function MyTabs() {
  const items = [
    { id: '1', label: 'Examples', href: '#' },
    {
      id: '2',
      label: 'Components',
      href: 'https://atlas.adjust.com/docs/components/introduction'
    },
    {
      id: '3',
      label: 'Design Tokens',
      href: 'https://atlas.adjust.com/docs/design-tokens/introduction'
    },
    {
      id: '4',
      label: 'Patterns',
      href: 'https://atlas.adjust.com/docs/patterns/introduction'
    }
  ];

  return <Tabs items={items} value="1" />;
}

Result

Loading...

Scrollable Tabs

In case there is no enough space to display the whole list of tab items Tabs component gets scrollable.

Live Editor

function ControlledTabsWithOverflowMenu() { const [value, setValue] = useState('10'); const items = [ { id: '1', iconName: 'Plus', label: 'First tab' }, { id: '2', iconName: 'Minus', label: 'Second tab' }, { id: '3', iconName: 'Check', label: 'Third tab' }, { id: '4', iconName: 'Plus', label: 'Fourth tab' }, { id: '5', iconName: 'Minus', label: 'Fifth tab' }, { id: '6', iconName: 'Check', label: 'Sixth tab' }, { id: '7', iconName: 'Plus', label: 'Seventh tab' }, { id: '8', iconName: 'Minus', label: '8th tab' }, { id: '9', iconName: 'Minus', label: '9th tab' }, { id: '10', iconName: 'Minus', label: '10th tab' }, { id: '11', iconName: 'Minus', label: '11th tab' }, { id: '12', iconName: 'Minus', label: '12th tab' }, { id: '13', iconName: 'Minus', label: '13th tab' }, { id: '14', iconName: 'Minus', label: '14th tab' }, { id: '15', iconName: 'Minus', label: '15th tab' }, { id: '16', iconName: 'Minus', label: '16th tab' }, { id: '17', iconName: 'Minus', label: '17th tab' }, { id: '18', iconName: 'Minus', label: '18th tab' }, { id: '19', iconName: 'Minus', label: '19th tab' }, { id: '20', iconName: 'Minus', label: '20th tab' } ]; return <Tabs items={items} onChange={setValue} value={value} />; }

function ControlledTabsWithOverflowMenu() {
  const [value, setValue] = useState('10');
  const items = [
    { id: '1', iconName: 'Plus', label: 'First tab' },
    { id: '2', iconName: 'Minus', label: 'Second tab' },
    { id: '3', iconName: 'Check', label: 'Third tab' },
    { id: '4', iconName: 'Plus', label: 'Fourth tab' },
    { id: '5', iconName: 'Minus', label: 'Fifth tab' },
    { id: '6', iconName: 'Check', label: 'Sixth tab' },
    { id: '7', iconName: 'Plus', label: 'Seventh tab' },
    { id: '8', iconName: 'Minus', label: '8th tab' },
    { id: '9', iconName: 'Minus', label: '9th tab' },
    { id: '10', iconName: 'Minus', label: '10th tab' },
    { id: '11', iconName: 'Minus', label: '11th tab' },
    { id: '12', iconName: 'Minus', label: '12th tab' },
    { id: '13', iconName: 'Minus', label: '13th tab' },
    { id: '14', iconName: 'Minus', label: '14th tab' },
    { id: '15', iconName: 'Minus', label: '15th tab' },
    { id: '16', iconName: 'Minus', label: '16th tab' },
    { id: '17', iconName: 'Minus', label: '17th tab' },
    { id: '18', iconName: 'Minus', label: '18th tab' },
    { id: '19', iconName: 'Minus', label: '19th tab' },
    { id: '20', iconName: 'Minus', label: '20th tab' }
  ];

  return <Tabs items={items} onChange={setValue} value={value} />;
}

Result

Loading...

Accessibility

The Atlas Tabs component supports keyboard navigation out of the box. The user can navigate between tabs using the arrow keys, and activate a tab using the Enter or Space keys.

To improve accessibility and stay compliant with WCAG 2.1 and our Accessibility Guidelines, it's required to pass the element ID of the tab panel which is controlled by the individual Tab Item via the ariaControls prop. Additionally, the tab panels itself should have a role="tabpanel" and an aria-labelledby attribute which points to the ID of the Tab Item.

Usage Rules

Do:

• Make sure that the labels show a clear relationship between views
• Place content in each view that is independent of the content in other views
• If tabs at the page header, they must allow the new browser tab or window to be opened, pleaser refer hyperlink

Don't:

• Combine items with and without icon in one Tabs component
• Nest tabs within another tab component
• Use tabs to break user interactions into a series of steps. Serial workflows are better presented in form of a sequence map, or timeline.
• Force users to navigate back and forth between tabs to compare data, and avoid cross linking between tabs

Use short and clear labels

To describe the content of a tab, use a label that is short and direct (and use the icon variant if labels can be supported by an icon metaphor). Favor nouns over verbs ⏤ for example: Settings, Permissions, Trackers. Try to avoid generic labels, such as General or Advanced.

When to use: Tabs vs. Segmented Buttons

Use tabs as a primary navigation element, when content can be usefully separated into clearly labelled sections, which share the same level of hierarchy. Use segmented buttons as a local control inside a particular view to switch between subsets of data within that view.

Variants

Disabled

Live Editor

function ControlledTabsWithDisabledItem() { const [value, setValue] = useState('1'); const items = [ { id: '1', iconName: 'PlatformAndroidFilled', label: 'Android' }, { id: '2', iconName: 'PlatformIosFilled', label: 'iOS' }, { id: '3', disabled: true, iconName: 'PlatformWindowsPhoneFilled', label: 'Windows Phone' }, { id: '4', iconName: 'PlatformWindowsFilled', label: 'Windows' } ]; return <Tabs items={items} onChange={setValue} value={value} />; }

function ControlledTabsWithDisabledItem() {
  const [value, setValue] = useState('1');
  const items = [
    { id: '1', iconName: 'PlatformAndroidFilled', label: 'Android' },
    { id: '2', iconName: 'PlatformIosFilled', label: 'iOS' },
    {
      id: '3',
      disabled: true,
      iconName: 'PlatformWindowsPhoneFilled',
      label: 'Windows Phone'
    },
    { id: '4', iconName: 'PlatformWindowsFilled', label: 'Windows' }
  ];

  return <Tabs items={items} onChange={setValue} value={value} />;
}

Result

Loading...

Hyperlink

Tab Item can be set as a link item:

• Anchor element (default) by adding its attributes such as href, target, ...

Live Editor

function MyTabs() { const items = [ { id: '1', label: 'Link 1', href: '#' }, { id: '2', label: 'Link 2', href: 'https://atlas.adjust.com/docs/components/introduction' }, { id: '3', label: 'Link 3', href: 'https://atlas.adjust.com/docs/design-tokens/introduction', }, { id: '4', label: 'Link 4', href: 'https://atlas.adjust.com/docs/patterns/introduction', target: '_blank' } ]; return <Tabs items={items} value="1" />; }

function MyTabs() {
  const items = [
    { id: '1', label: 'Link 1', href: '#' },
    {
      id: '2',
      label: 'Link 2',
      href: 'https://atlas.adjust.com/docs/components/introduction'
    },
    {
      id: '3',
      label: 'Link 3',
      href: 'https://atlas.adjust.com/docs/design-tokens/introduction',
    },
    {
      id: '4',
      label: 'Link 4',
      href: 'https://atlas.adjust.com/docs/patterns/introduction',
      target: '_blank'
    }
  ];

  return <Tabs items={items} value="1" />;
}

Result

Loading...

• External link component (e.g react-router-dom) by adding as and its attributes such as to, replace, ...

import { Link } from 'react-router-dom';

function MyTabs() {
  const items = [
    {
      id: '1',label: 'Link 1', 
      as: Link,
      to: '#'
    },
    {
      id: '2',
      label: 'Link 2',
      as: Link,
      to: {
        pathname: "/courses",
        hash: "#tab-2",
      }
    },
    {
      id: '3',
      label: 'Link 3',
      as: Link,
      to: {
        pathname: "/courses",
        search: "?sort=name",
        hash: "#tab-3",
      }
    },
    {
      id: '4',
      label: 'Link 4',
      as: Link,
      to: 'https://atlas.adjust.com/docs/design-tokens/introduction',
      target: '_blank'
    }
  ];

  return <Tabs items={items} value="1" />;
}

Icons

Labels and icons

Live Editor

function ControlledTabsWithIcons() { const [value, setValue] = useState('1'); const items = [ { id: '1', iconName: 'PlatformAndroidFilled', label: 'Android' }, { id: '2', iconName: 'PlatformIosFilled', label: 'iOS' }, { id: '3', iconName: 'PlatformWindowsPhoneFilled', label: 'Windows Phone' }, { id: '4', iconName: 'PlatformWindowsFilled', label: 'Windows' } ]; return <Tabs items={items} onChange={setValue} value={value} />; }

function ControlledTabsWithIcons() {
  const [value, setValue] = useState('1');
  const items = [
    { id: '1', iconName: 'PlatformAndroidFilled', label: 'Android' },
    { id: '2', iconName: 'PlatformIosFilled', label: 'iOS' },
    { id: '3', iconName: 'PlatformWindowsPhoneFilled', label: 'Windows Phone' },
    { id: '4', iconName: 'PlatformWindowsFilled', label: 'Windows' }
  ];

  return <Tabs items={items} onChange={setValue} value={value} />;
}

Result

Loading...

Size

The Tabs component has two sizes: small and medium.

Live Editor

function SmallAndMediumTabs() { const [value, setValue] = useState('1'); const items = [ { id: '1', label: 'Android' }, { id: '2', label: 'iOS' }, { id: '3', label: 'Windows Phone' }, { id: '4', label: 'Windows' } ]; return ( <> <Tabs size="small" items={items} value={value} onChange={setValue} /> <Tabs items={items} value={value} onChange={setValue} /> </> ); }

function SmallAndMediumTabs() {
  const [value, setValue] = useState('1');
  const items = [
    { id: '1', label: 'Android' },
    { id: '2', label: 'iOS' },
    { id: '3', label: 'Windows Phone' },
    { id: '4', label: 'Windows' }
  ];

  return (
    <>
      <Tabs size="small" items={items} value={value} onChange={setValue} />
      <Tabs items={items} value={value} onChange={setValue} />
    </>
  );
}

Result

Loading...

Tooltip

You can add a Tooltip to Tab items by passing tooltip prop which accepts all Tooltip Component's props

Live Editor

function TabsWithTooltip() { const [value, setValue] = useState('1'); const items = [ { id: '1', label: 'Android', tooltip: { content: 'Tooltip content', position: 'top' } }, { id: '2', label: 'I am a long label text if not readable completely then find me in the tooltip' } ]; return <Tabs items={items} onChange={setValue} value={value} />; }

function TabsWithTooltip() {
  const [value, setValue] = useState('1');
  const items = [
    {
      id: '1',
      label: 'Android',
      tooltip: {
        content: 'Tooltip content',
        position: 'top'
      }
    },
    {
      id: '2',
      label: 'I am a long label text if not readable completely then find me in the tooltip'
    }
  ];

  return <Tabs items={items} onChange={setValue} value={value} />;
}

Result

Loading...

Props

Tabs

Name	Type	Default
items * Array of tab items. See the structure of TabItemType	TabItemType[]	—
onChange The handler that is called on a new selection	((itemId: string) => void)	—
size The size of the Tabs component	"small" | "medium"	"medium"
value Id of selected item	string	—
css Add custom styles to this component. Use with caution. Learn more here: Link	SupportedStyleAttributes	—
inputFieldCss	SupportedStyleAttributes	—
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence	string	—
* - the prop is required.

Object structure of the items prop

Name	Type	Default
label * Label of the tab item	string	—
id * Tab item identifier	string	—
ariaControls Provide element id whose content or presence is controlled by the current element. Check Accessibility page for more info: Link	string	—
disabled The disabled state of the tab item	boolean	false
iconName Name of the Icon that is shown next to the label. Refer to the full list here: Link	"AddValue" | "AppGrid" | "ArrowCircleLeft" | "ArrowCircleRight" | "ArrowDown" | "ArrowDownLeft" | "A...	—
tooltip The Tooltip that shows up on label hover. Please check	Omit<TooltipProps, "children">	—
as Allow to use external link component, such as: react-router-dom Link	ElementType<any>	—
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence	string	—
* - the prop is required.

Related Components

• SegmentedButton