Tabs

Tabs organize content into multiple sections and allow users to navigate between them.

Basic tabs

A basic example with three tabs.

Item 1

Item 2

Item 3

const [activeId, setActiveId] = useState('tab1');

<Tabs activeId={activeId} onActiveIdChanged={setActiveId}>
  <Tab id="tab1" label="Item 1" />
  <Tab id="tab2" label="Item 2" />
  <Tab id="tab3" label="Item 3" />
</Tabs>

Sizes

Set size attribute to small or medium to style tabs size. By default, tabs have size medium.

Item 1

Item 2

Item 3

<Tabs size="small">
  <Tab id="tab1" label="Item 1" />
  <Tab id="tab2" label="Item 2" />
  <Tab id="tab3" label="Item 3" />
</Tabs>

Item 1

Item 2

Item 3

<Tabs size="medium">
  <Tab id="tab1" label="Item 1" />
  <Tab id="tab2" label="Item 2" />
  <Tab id="tab3" label="Item 3" />
</Tabs>

States

Active State

Set the activeId prop on the Tabs component to control which tab is active.

Item 1

Item 2

Item 3

<Tabs activeId="tab1">
  <Tab id="tab1" label="Item 1" />
  <Tab id="tab2" label="Item 2" />
  <Tab id="tab3" label="Item 3" />
</Tabs>

Disabled State

Add disabled attribute to tab to style it as disabled.

Item 1

Item 2

Item 3

<Tabs>
  <Tab id="tab1" disabled label="Item 1" />
  <Tab id="tab2" label="Item 2" />
  <Tab id="tab3" label="Item 3" />
</Tabs>

Divider

By default, tabs has a divider. Alternatively, tabs can be used without a divider by setting divider to false.

Item 1

Item 2

Item 3

<Tabs divider={false}>
  <Tab id="tab1" label="Item 1" />
  <Tab id="tab2" label="Item 2" />
  <Tab id="tab3" label="Item 3" />
</Tabs>

Layout

• fullWidth attribute if you want the tabs container to take up the whole width.
• fullHeight attribute if you want the tabs container to take up the whole height.

Fluid Tabs

Add fullWidth and fluid to Tabs if you want set equal tabs widths when the tabs wrapper takes up the whole width available.

Item 1

Item 2

Item 3

<Tabs fullWidth fluid>
  <Tab id="tab1" label="Item 1" />
  <Tab id="tab2" label="Item 2" />
  <Tab id="tab3" label="Item 3" />
</Tabs>

Alignment

Tabs alignment can be set by setting alignment attribute to left, center, right.

Left alignment

Item 1

Item 2

Item 3

<Tabs fullWidth alignment="left">
  <Tab id="tab1" label="Item 1" />
  <Tab id="tab2" label="Item 2" />
  <Tab id="tab3" label="Item 3" />
</Tabs>

Center alignment

Item 1

Item 2

Item 3

<Tabs fullWidth alignment="center">
  <Tab id="tab1" label="Item 1" />
  <Tab id="tab2" label="Item 2" />
  <Tab id="tab3" label="Item 3" />
</Tabs>

Right alignment

Item 1

Item 2

Item 3

<Tabs fullWidth alignment="right">
  <Tab id="tab1" label="Item 1" />
  <Tab id="tab2" label="Item 2" />
  <Tab id="tab3" label="Item 3" />
</Tabs>

Scrollable tabs

Use scrollHorizontally to allow horizontal scrolling if needed.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

<Tabs scrollHorizontally fullWidth>
  <Tab id="tab1" label="Item 1" />
  <Tab id="tab2" label="Item 2" />
  <Tab id="tab3" label="Item 3" />
  <Tab id="tab4" label="Item 4" />
  <Tab id="tab5" label="Item 5" />
  <Tab id="tab6" label="Item 6" />
  <Tab id="tab7" label="Item 7" />
</Tabs>

Icons

Tab labels may be either all icons or all text.

settings

account_circle

face

<Tabs>
  <Tab id="tab1" icon={<Icon icon="settings" />} />
  <Tab id="tab2" icon={<Icon icon="account_circle" />} />
  <Tab id="tab3" icon={<Icon icon="face" />} />
</Tabs>

settingsItem 1

account_circleItem 2

faceItem 3

<Tabs>
  <Tab id="tab1" icon={<Icon icon="settings" />} label="Item 1" />
  <Tab id="tab2" icon={<Icon icon="account_circle" />} label="Item 2" />
  <Tab id="tab3" icon={<Icon icon="face" />} label="Item 3" />
</Tabs>

Icon position

By default, the icon is positioned at the start of a tab. Other supported position is end.

settingsItem 1

Item 2account_circle

faceItem 3

<Tabs>
  <Tab id="tab1" icon={<Icon icon="settings" />} label="Item 1" iconPosition="start" />
  <Tab id="tab2" icon={<Icon icon="account_circle" />} label="Item 2" iconPosition="end" />
  <Tab id="tab3" icon={<Icon icon="face" />} label="Item 3" />
</Tabs>

Vertical Tab

Set tabItemDirection attribute to horizontal or vertical to allow horizontal/vertical tab layout.

settingsItem 1

account_circleItem 2

faceItem 3

<Tabs tabItemDirection="vertical">
  <Tab id="tab1" icon={<Icon icon="settings" />} label="Item 1" />
  <Tab id="tab2" icon={<Icon icon="account_circle" />} label="Item 2" />
  <Tab id="tab3" icon={<Icon icon="face" />} label="Item 3" />
</Tabs>

Customization

A Tab can also take any content in their children.

settings

Item 1

account_circle

Item 2

face

Item 3

<Tabs>
  <Tab id="tab1">
    <Icon icon="settings" />
    <Typography classes="text-green-500">Item 1</Typography>
  </Tab>
  <Tab id="tab2">
    <Icon icon="account_circle" />
    <Typography classes="text-red-500">Item 2</Typography>
  </Tab>
  <Tab id="tab3">
    <Icon icon="face" />
    <Typography classes="text-primary-500">Item 3</Typography>
  </Tab>
</Tabs>

Event handling

The Tabs component provides a main event handler to manage active tab changes:

onActiveIdChanged

Triggered when a user clicks on a tab. The callback receives the ID of the selected tab as a parameter.

const [activeId, setActiveId] = useState('tab1');

const handleTabChange = (id) => {
  console.log(`Tab changed to: ${id}`);
  setActiveId(id);
  
  // Additional logic based on the selected tab
  if (id === 'tab2') {
    loadTabTwoContent();
  }
};

<Tabs activeId={activeId} onActiveIdChanged={handleTabChange}>
  <Tab id="tab1" label="Item 1" />
  <Tab id="tab2" label="Item 2" />
  <Tab id="tab3" label="Item 3" />
</Tabs>

By using this event handler with local state, you can:

• Control which tab is active
• Load specific content based on the selected tab
• Trigger other actions when a particular tab is selected

Note that disabled tabs (disabled={true}) will not trigger this event when clicked.

Custom Classes

Add your own classes in the classes attribute. This way you will be able to override or extend the styles applied to the component (you can use available utility classes by importing @qtm/css/dist/utilities.css).

Item 1

Item 2

Item 3

<Tabs classes="bg-bluegrey-100 p-s rounded-m">
  <Tab id="tab1" label="Item 1" />
  <Tab id="tab2" label="Item 2" />
  <Tab id="tab3" label="Item 3" />
</Tabs>

API

QtmTabs

Property	Type	Default	Description
alignment	"center" | "left" | "right"	'left'	set the tabs alignement when the tabs component takes up the whole width available( fullWidth=true)
classes	string		list of classes to override or extend the styles applied to the component. You can use available utility classes by importing
divider	boolean	true	If true, the divider is displayed.
fluid	boolean	false	set equal tabs widths when the tabs component takes up the whole width available( fullWidth=true)
fullHeight	boolean	false	If true, the tabs component takes up the whole height available
fullWidth	boolean	false	If true, the tabs component takes up the whole width available
scrollHorizontally	boolean	false	If true, the tabs component scroll horizontally
size	"medium" | "small"	'medium'	tab size
tabItemDirection	"horizontal" | "vertical"	'horizontal'	set tabs component's direction

QtmTab

Property	Type	Default	Description
active	boolean	false	If true, the tab is active
classes	string		list of classes to override or extend the styles applied to the component. You can use available utility classes by importing
disabled	boolean	false	If true, the component is disabled.
icon	string | { icon: string; classes?: string; lib?: IconLibType; size?: IconSizeType; variant?: IconVariantType; }		icon to display
iconPosition	"end" | "start"	'start'	icon position 'start' | 'end'
label	string		text to display

Event	Type	Description
onClickedTabEvent	CustomEvent<string>	Callback fired when the tab is clicked.