Tabs

Switch between different views

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

Usage

<Tabs>
  <Tabs.Tab label="Gallery" icon={<ImageIcon />}>Gallery tab content</Tabs.Tab>
  <Tabs.Tab label="Messages" icon={<ChatBubbleIcon />}>Messages tab content</Tabs.Tab>
  <Tabs.Tab label="Settings" icon={<MixerVerticalIcon />}>Settings tab content</Tabs.Tab>
</Tabs>

Controlled Tabs

import { useState } from 'react';
import { Tabs } from '@mantine/core';

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

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

Tabs.Tab accepts an optional tabKey prop, if included the tabKey will be included as second argument in the onTabChange callback:

import { useState } from 'react';
import { Tabs } from '@mantine/core';

function Demo() {
  const [activeTab, setActiveTab] = useState(1);
  const onChange = (active: number, tabKey: string) => {
    setActiveTab(active);
    console.log('tabKey', tabKey);
  };

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

Tabs with icons

Add any React node as icon by setting icon prop on Tabs.Tab component. If icon prop is set, it is not necessary to pass label:

Chat here

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

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

Teal tab content

<Tabs color="teal">
  <Tabs.Tab label="Teal tab">Teal tab content</Tabs.Tab>
  <Tabs.Tab label="Still teal">Teal tab #2</Tabs.Tab>
  <Tabs.Tab label="Pink tab" color="pink">
    Pink tab content
  </Tabs.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.

First tab content

Grow

Position

Variant

Default

Outline

Pills

<Tabs>
  <Tabs.Tab label="First">First tab content</Tabs.Tab>
  <Tabs.Tab label="Second">Second tab content</Tabs.Tab>
  <Tabs.Tab label="Third">Third tab content</Tabs.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.

First tab content

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

Add your styles with styles API

You can change styles of any element in button component with Styles API to match your design requirements. To remove all default styles set variant prop to unstyled:

import { TabsProps, Tabs, Tab } from '@mantine/core';
import { ImageIcon, ChatBubbleIcon, GearIcon } from '@modulz/radix-icons';

function StyledTabs(props: TabsProps) {
  return (
    <Tabs
      variant="unstyled"
      styles={(theme) => ({
        tabControl: {
          backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.white,
          color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[9],
          border: `1px solid ${theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[4]}`,
          fontSize: theme.fontSizes.md,
          padding: `${theme.spacing.lg}px ${theme.spacing.xl}px`,

          '&:not(:first-of-type)': {
            borderLeft: 0,
          },

          '&:first-of-type': {
            borderTopLeftRadius: theme.radius.md,
            borderBottomLeftRadius: theme.radius.md,
          },

          '&:last-of-type': {
            borderTopRightRadius: theme.radius.md,
            borderBottomRightRadius: theme.radius.md,
          },
        },

        tabActive: {
          backgroundColor: theme.colors.blue[7],
          borderColor: theme.colors.blue[7],
          color: theme.white,
        },
      })}
      {...props}
    />
  );
}

function Demo() {
  return (
    <StyledTabs>
      <Tabs.Tab label="Settings" icon={<GearIcon width={16} height={16} />} />
      <Tabs.Tab label="Messages" icon={<ChatBubbleIcon width={16} height={16} />} />
      <Tabs.Tab label="Gallery" icon={<ImageIcon width={16} height={16} />} />
    </StyledTabs>
  );
}

Get tab control ref

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

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

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