> ## 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

> Presenta enlaces de ruta y acciones junto a pestañas con un estilo uniforme.

## Resumen

Usa `TabButton` para enlaces de ruta y acciones como añadir una pestaña o abrir un menú de desbordamiento. Comparte la apariencia de [Tabs](https://docs.twenty.com/es/ui/primitives/navigation/tabs.md) y usa [Button](https://docs.twenty.com/es/ui/primitives/input/button.md) para la interacción.

**Light**

[Ejemplo de TabButton (light)](https://storybook.twenty.com/iframe.html?id=ui-components-tabbutton--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Ejemplo de TabButton (dark)](https://storybook.twenty.com/iframe.html?id=ui-components-tabbutton--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-components-tabbutton--display)

## "Uso"

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

export const GeneralAction = ({ onOpen }: { onOpen: () => void }) => (
  <TabButton startIcon={<IconSettings />} onClick={onOpen}>
    General
  </TabButton>
);
```

## Estado y semántica

Tu aplicación proporciona `active` a partir de su estado actual de ruta o menú. Esta propiedad resalta el control. Establece `aria-current="page"` en el enlace de la ruta actual. Los enlaces de ruta y las acciones adyacentes conservan su semántica de enlace o botón, sin función de pestaña, `aria-selected` ni relación con el panel.

Usa `Tabs.Root`, `Tabs.List`, `Tabs.Tab`, `Tabs.Panel` y el `Tabs.Indicator` opcional para alternar entre paneles de contenido relacionados. Mantén los controles de ruta y acción fuera de `Tabs.List`.

## Navegación

Establece `href` para renderizar un enlace nativo. La ruta actual controla su apariencia `active` y su valor `aria-current`.

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

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

Para el enrutamiento del lado del cliente, proporciona el enlace de tu enrutador mediante `render`, establece `nativeButton={false}` y `role="link"`, y pasa el destino resuelto como `href`. Mantén las opciones de estado e historial de la ruta en el enlace del enrutador. Los envoltorios personalizados deben reenviar las props y la ref proporcionadas a su ancla.

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

export const ComposedBillingLink = () => (
  <TabButton
    nativeButton={false}
    role="link"
    href="/billing"
    render={<a />}
    aria-current="page"
    active
  >
    Billing
  </TabButton>
);
```

Un `nativeButton` explícito controla el contrato de interacción incluso cuando `href` está presente. Haz que coincida con el elemento realmente renderizado. Los enlaces deshabilitados conservan su función de enlace y bloquean la activación.

## Acciones

Sin `href`, el control representa un botón nativo con `type="button"`. Los atributos nativos, las referencias, los estilos, los nombres de clase y los controladores de eventos se transfieren. `render` acepta un elemento o una función que recibe las props y el estado de Button. Las refs apuntan al botón o ancla realmente renderizados, incluidas las refs proporcionadas en un elemento compuesto.

```tsx theme={null}
import { useState } from 'react';
import { TabButton } from 'twenty-ui/components/navigation';
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>
    </>
  );
};
```

Usa `startIcon`, `endIcon` y `badge` para contenido complementario. Un avatar pasado a una ranura de icono es decorativo cuando el texto nombra el destino. `size` conserva el contrato público de tamaño de Button. Un tamaño explícito tiene prioridad sobre el tamaño de un `ButtonGroup` circundante; de lo contrario, el componente usa `sm` de forma predeterminada.

## "Props"

**active** `boolean` (default: false)

Highlights the current destination or an action associated with the active tab. Does not change the control role.

**badge** `ReactNode`

Content following the label and trailing icon, such as a count.

**className** `string | ((state: ButtonState) =\> string | undefined)`

CSS class applied to the element, or a function that
returns a class based on the component's state.

**endIcon** `ReactNode`

Decorative content displayed after the label.

**focusableWhenDisabled** `boolean` (default: false)

Whether the button should be focusable when disabled.

**href** `string`

Destination URL. Renders a native anchor when `render` is omitted unless `nativeButton` is explicitly true. Custom renderers retain their own element contract.

**nativeButton** `boolean` (default: true)

Whether the rendered root is a native button. Defaults to true for custom renderers. The built-in `href` anchor defaults to false; an explicit value takes precedence.

**render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, ButtonState\>`

Caller-supplied root element or renderer. Native attributes, handlers, event details, and refs reach the rendered root. Use `nativeButton={false}` and `role="link"` for a custom navigation anchor. Router integration belongs to the caller.

**role** `AriaRole`

Role of the root element. Use `link` for custom navigation renderers.

**size** `"md" | "sm"` (default: sm)

Padding of the tab content: sm or md. Explicit size takes precedence over the ButtonGroup size, then sm applies.

**startIcon** `ReactNode`

Decorative content displayed before the label.

**style** `CSSProperties | ((state: ButtonState) =\> CSSProperties | undefined)`

Style applied to the element, or a function that
returns a style object based on the component's state.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.