> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# TabButton

> Present route links and actions alongside tabs with consistent styling.

export const StoryEmbed = ({storyId, title, height = 240}) => <>
    <Tabs>
      <Tab title="Light">
        <iframe title={`${title} (light)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:light`} width="100%" height={height} loading="lazy" style={{
  border: 0
}} />
      </Tab>
      <Tab title="Dark">
        <iframe title={`${title} (dark)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:dark`} width="100%" height={height} loading="lazy" style={{
  border: 0
}} />
      </Tab>
    </Tabs>
    <a href={`https://storybook.twenty.com/?path=/story/${storyId}`}>
      Open in Storybook
    </a>
  </>;

Use `TabButton` for navigation links and actions such as adding a tab or opening an overflow menu. It shares the appearance of [Tabs](/ui/primitives/navigation/tabs) and uses [Button](/ui/primitives/input/button) for interaction.

<StoryEmbed storyId="ui-components-tabbutton--default" title="TabButton example" height={180} />

## State ownership

Your application supplies `active` from its current route or menu state. This prop highlights the control without changing its role or introducing selection state. Use `Tabs.Root`, `Tabs.List`, `Tabs.Tab`, and `Tabs.Panel` to switch between related content panels, with controlled or uncontrolled selection.

## Navigation

Set `href` to render a link. Supply `aria-current="page"` on the current destination.

```tsx theme={null}
import { TabButton } from 'twenty-ui/components';
import { IconCreditCard } from 'twenty-ui/icon';

export const BillingLink = () => (
  <TabButton
    href="/billing"
    active
    aria-current="page"
    startIcon={<IconCreditCard />}
  >
    Billing
  </TabButton>
);
```

For client-side routing, pass the resolved destination as `href` and your router link through `render`. Keep route state and history options on the router link. Custom wrappers must forward props and the ref to the anchor. Disabled links retain their link role and block activation.

## Actions

Without `href`, the control renders a native button with `type="button"`. Native attributes, refs, styles, class names, and event handlers pass through.

```tsx theme={null}
import { useState } from 'react';
import { TabButton } from 'twenty-ui/components';
import { IconPlus } from 'twenty-ui/icon';
import { Text } from 'twenty-ui/primitives/typography';

export const AddTabAction = () => {
  const [count, setCount] = useState(1);

  return (
    <>
      <TabButton startIcon={<IconPlus />} onClick={() => setCount(count + 1)}>
        New Tab
      </TabButton>
      <Text role="status">Tabs: {count}</Text>
    </>
  );
};
```

Use `startIcon`, `endIcon`, and `badge` for supporting content. An avatar passed to an icon slot is decorative when the text names the destination. The `size` prop controls content padding with `sm` and `md` values.

## Props

<ParamField body="active" type="boolean" default="false">
  Highlights the current destination or an action associated with the active tab. Does not change the control role.
</ParamField>

<ParamField body="badge" type="ReactNode">
  Content following the label and trailing icon, such as a count.
</ParamField>

<ParamField body="className" type="string | ((state: ButtonState) => string | undefined)">
  CSS class applied to the element, or a function that
  returns a class based on the component's state.
</ParamField>

<ParamField body="endIcon" type="ReactNode">
  Decorative content displayed after the label.
</ParamField>

<ParamField body="focusableWhenDisabled" type="boolean" default="false">
  Whether the button should be focusable when disabled.
</ParamField>

<ParamField body="render" type="ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState>">
  Caller-supplied root element or renderer. Preserve a native button, or an anchor when `href` is set. Router integration belongs to the caller.
</ParamField>

<ParamField body="size" type="&#x22;sm&#x22; | &#x22;md&#x22;" default="sm">
  Padding of the tab content: sm or md.
</ParamField>

<ParamField body="startIcon" type="ReactNode">
  Decorative content displayed before the label.
</ParamField>

<ParamField body="style" type="CSSProperties | ((state: ButtonState) => CSSProperties | undefined)">
  Style applied to the element, or a function that
  returns a style object based on the component's state.
</ParamField>