Skip to main content
Last modified: August 22, 2025
The Tabs component allows you to group related content into clickable tabs, with each Tab child component creating a new tab. Options are provided for visual variants, tooltip configuration, and more.
Example of the Tabs UI component
import { Alert, Tabs, Tab } from '@hubspot/ui-extensions';

// Uncontrolled example: uses `defaultSelected` to set initial tab,
// user controls changing tabs via clicking

const Extension = () => {
  return (
<Tabs>

<Tab title="First Tab">
<Info>
Your email address was successfully updated.
</Info>
</Tab>
<Tab title="Second Tab">
Tab 2's content
</Tab>

</Tabs>
  );
};

​
Tabs props

PropTypeDescription
defaultSelectedString | NumberThe ID of the tab to display by default (as set by the Tab’s tabId prop).
fillBooleanWhether the tabs should fill the available space.
onSelectedChange(selectedId: string | number) => voidA function that gets invoked when the selected tab changes.
selectedString | NumberThe currently selected tab ID, for controlling the component via React state.
variantdefault | enclosedVisual style of the tabs. See variants for more information.

​
Tab props

PropTypeDescription
disabledBooleanWhether the tab should be disabled. When set to false, tab will be greyed out and not clickable.
tabIdString | NumberThe tab’s unique identifier.
titleStringThe tab’s title text.
tooltipStringThe text that appears in a tooltip on hover. Learn more about tooltips.
tooltipPlacementtop (default) | bottom | left | right |Where the tooltip should appear, relative to the tab.
Once there are enough tabs to exceed the width of the container, HubSpot will automatically put overflowing tabs into a More dropdown menu, which users can click to select from the remaining tabs.
Example of how HubSpot automatically handles overflow for tabs that would exceed the width of the container

​
Variants

The variant prop provides two options for tab styling: default and enclosed.
Example of default tab styling
<Tabs>
Example of enclosed tab styling
<Tabs variant="enclosed">
You can also set the fill prop to true to configure the tabs to take up the full width of the container.
Example of full-width tab styling
<Tabs variant="enclosed" fill={true}>

​
Tooltips

Use the tooltip prop to add tooltips to tabs on hover. By default, the tooltip will appear above the tab, but you can use the tooltipPlacement prop to configure it further.
Example of a default tooltip that appears when hovering over the tab
<Tab title="First tab">
Example of a tooltip configured to display to the right of the tab
<Tab tooltip="Some helpful context." tooltipPlacement="right" tabId="second" title="Second tab">

​
Controlling tabs via React state

In addition to being able to switch tabs by clicking on each tab, you can also control tab select via React state using the selected and onSelectedChange props.
Example of controlling tabs via React state
import React, { useState } from 'react';
import { Tabs, Tab, Button, Text } from '@hubspot/ui-extensions';

// Controlled example: uses `selected` and
// `onSelectedChange` props to handle updates

const BasicExtension = () => {
const [selected, setSelected] = useState('second');
return (
<>
<Tabs selected={selected} onSelectedChange={setSelected}>
<Tab tabId="first" title="First">
1st tab content
</Tab>
<Tab title="Second">
2nd tab content
</Tab>
<Tab title="Third">
3rd tab content
</Tab>

</Tabs>

      <Text>Selected: {selected}</Text>
      <Button onClick={() => setSelected('third')}>Select third tab</Button>
    </>
  );
};