Tabs
Components
Tab
– utility component to pass data toTabs
component, does not render anything on its own. Do not use outside ofTabs
component.Tabs
– receives data fromTab
content and renders component
Usage
<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:
- 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>
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>
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)