Tabs

Switch between different views
Import

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

Gallery tab content
Color
Variant
TabPadding
Orientation
<Tabs>
<Tab label="Gallery" icon={<ImageIcon />}>Gallery tab content</Tab>
<Tab label="Messages" icon={<ChatBubbleIcon />}>Messages tab content</Tab>
<Tab label="Settings" icon={<MixerVerticalIcon />}>Settings 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 { useState } 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:

Chat here
<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.

Teal tab content
<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>

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
Variant
<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.

First tab content
<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>

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 { createStyles, Tabs, Tab } from '@mantine/core';
const useStyles = createStyles((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, theme.spacing.xl],
'& + &': {
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,
},
}));
function StyledTabs(props: TabsProps) {
const classes = useStyles();
return <Tabs variant="unstyled" classNames={classes} {...props} />;
}
function Demo() {
return (
<StyledTabs>
<Tab label="Settings" icon={<GearIcon width={16} height={16} />} />
<Tab label="Messages" icon={<ChatBubbleIcon width={16} height={16} />} />
<Tab label="Gallery" icon={<ImageIcon width={16} height={16} />} />
</StyledTabs>
);
}

Get tab control ref

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

import { 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 when orientation is horizontal
  • Use down and up arrow keys to change tabs when orientation is vertical
  • Only selected tab control can be focused
  • All elements have correct roles: tab, tablist and tabpanel
  • aria-orientation is set based off orientation prop (default is horizontal)
Build fully functional accessible web applications with ease
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback