> ## 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` для ссылок маршрутов и действий, таких как добавление вкладки или открытие меню переполнения. Он имеет такой же внешний вид, как [Вкладки](https://docs.twenty.com/ru/ui/primitives/navigation/tabs.md), и для взаимодействия использует [Кнопку](https://docs.twenty.com/ru/ui/primitives/input/button.md).

**Light**

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

**Dark**

[Пример 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)

## Использование

```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>
);
```

## Состояние и семантика

Ваше приложение передает `active` на основе текущего состояния маршрута или меню. Это свойство выделяет элемент управления. Установите `aria-current="page"` для ссылки текущего маршрута. Ссылки маршрутов и соседние действия сохраняют семантику ссылок или кнопок без роли вкладки, `aria-selected` или связи с панелью.

Используйте `Tabs.Root`, `Tabs.List`, `Tabs.Tab`, `Tabs.Panel` и необязательный `Tabs.Indicator` для переключения между связанными панелями содержимого. Размещайте элементы управления маршрутом и действиями вне `Tabs.List`.

## Навигация

Задайте `href`, чтобы отрисовать нативную ссылку. Текущий маршрут управляет своим видом `active` и значением `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>
);
```

Для маршрутизации на стороне клиента передайте ссылку маршрутизатора через `render`, задайте `nativeButton={false}` и `role="link"`, а разрешенный пункт назначения передайте как `href`. Сохраняйте параметры состояния маршрута и истории в ссылке маршрутизатора. Пользовательские обертки должны передавать предоставленные props и ref своему элементу anchor.

```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>
);
```

Явно заданный `nativeButton` управляет контрактом взаимодействия даже при наличии `href`. Сопоставьте его с фактически отрисованным элементом. Отключенные ссылки сохраняют роль ссылки и блокируют активацию.

## Действия

Без `href` элемент управления отображает нативную кнопку с `type="button"`. Нативные атрибуты, refs, стили, имена классов и обработчики событий передаются без изменений. `render` принимает элемент или функцию, получающую props и состояние Button. Refs указывают на фактически отрисованную кнопку или anchor, включая refs, предоставленные для составного элемента.

```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>
    </>
  );
};
```

Используйте `startIcon`, `endIcon` и `badge` для вспомогательного содержимого. Аватар, переданный в слот значка, является декоративным, когда текст называет назначение. `size` сохраняет публичный контракт размера Button. Явно заданный размер имеет приоритет над размером окружающей `ButtonGroup`; в противном случае компонент по умолчанию использует `sm`.

## Свойства

**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.