Tabs

Components

• Tab – utility component to pass data to Tabs component, does not render anything on its own. Do not use outside of Tabs component.
• Tabs – receives data from Tab content and renders component

Usage

<Tabs>
  <Tab label="First">First tab content</Tab>
  <Tab label="Second">Second tab content</Tab>
  <Tab label="Third">Third tab content</Tab>
</Tabs>

Outline variant

<Tabs variant="outline">
  <Tab label="First">First tab content</Tab>
  <Tab label="Second">Second tab content</Tab>
  <Tab label="Third">Third tab content</Tab>
</Tabs>

Controlled Tabs

Tabs state can be controlled, to implement this pass active and onTabChange props. You can also use onTabChange callback with uncontrolled Tabs.

import React from 'react';
import { Tabs, Tab } from '@mantine/core';

function Demo() {
  const [activeTab, setActiveTab] = useState(1);

  return (
    <Tabs active={activeTab} onTabChange={setActiveTab}>
      <Tab label="First">First tab content</Tab>
      <Tab label="Second">Second tab content</Tab>
      <Tab label="Third">Third tab content</Tab>
    </Tabs>
  );
}

Tabs with icons

You can add any React node as icon by setting icon prop on Tab component. If icon prop is set, it is not necessary to pass label. You can use icons from any react icons library, for example:

• radix icons (used in mantine packages)
• feather
• react-icons

<Tabs>
  <Tab label="Chat" icon={<ChatBubbleIcon />}>Chat here</Tab>
  <Tab label="Settings" icon={<MixerHorizontalIcon />}>Settings</Tab>
  <Tab icon="$">Get money!</Tab>
</Tabs>

Change colors

You can change color of individual tab by passing color property to Tab component, or change color of all tabs by passing color to Tabs component. Color that you pass to these components should be defined in theme.colors.

Color calculation prioritizes deeper values: first <Tab color="value" /> value will be used if defined, then <Tabs color="value">, after that value will be set to theme.primaryColor.

<Tabs color="teal">
  <Tab label="Teal tab">Teal tab content</Tab>
  <Tab label="Still teal">Teal tab #2</Tab>
  <Tab label="Pink tab" color="pink">
    Pink tab content
  </Tab>
</Tabs>

Theme colors

<Tabs>
  <Tab label="First">First tab content</Tab>
  <Tab label="Second">Second tab content</Tab>
  <Tab label="Third">Third tab content</Tab>
</Tabs>

Tabs position

Tabs controls position is controlled with grow and position props. If grow property is set to true, controls will take 100% of available space and position property is ignored.

<Tabs>
  <Tab label="First">First tab content</Tab>
  <Tab label="Second">Second tab content</Tab>
  <Tab label="Third">Third tab content</Tab>
</Tabs>

Tab component props

In addition to icon and label props shown before, Tab component accepts color, disabled and any other props from regular button (e.g. style, title, aria-, data-). color prop will override color defined in Tabs component.

<Tabs>
  <Tab label="First" title="Reveal hidden truth on long mouse over">
    First tab content
  </Tab>
  <Tab label="Not allowed" disabled>
    https://youtu.be/dQw4w9WgXcQ
  </Tab>
  <Tab label="Delete this?" color="red" style={{ fontWeight: 500 }}>
    Yes, delete this
  </Tab>
</Tabs>

Get tab control ref

You can get tab control ref by passing elementRef prop to Tab component

import React, { useRef } from 'react';
import { Tabs, Tab } from '@mantine/core';

function TabsDemo() {
  const secondTabRef = useRef();

  return (
    <Tabs>
      <Tab label="First">First tab content</Tab>
      <Tab label="Second" elementRef={secondTabRef}>
        Second tab content
      </Tab>
      <Tab label="Third">Third tab content</Tab>
    </Tabs>
  );
}

Accessibility and usability

Tabs component follows WAI-ARIA recommendations on accessibility. Component fully supports keyboard events handling and has correct aria-roles:

• Use right and left arrow keys to change tabs
• Only selected tab control can be focused
• All elements have correct roles: tab, tablist and tabpanel
• aria-orientation is always set to horizontal as component does not support vertical tabs