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

# Buton filă

> Afișează linkuri și acțiuni de rută alături de file, cu stilizare consecventă.

## Prezentare generală

Folosește `TabButton` pentru linkuri de rută și acțiuni precum adăugarea unei file sau deschiderea unui meniu de opțiuni suplimentare. Are aspectul [Tabs](https://docs.twenty.com/ro/ui/primitives/navigation/tabs.md) și folosește [Button](https://docs.twenty.com/ro/ui/primitives/input/button.md) pentru interacțiune.

**Light**

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

**Dark**

[Exemplu 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)

## Utilizare

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

## Stare și semantică

Aplicația ta furnizează `active` din starea curentă a rutei sau a meniului. Această proprietate evidențiază controlul. Setează `aria-current="page"` pe linkul rutei curente. Linkurile de rută și acțiunile adiacente își păstrează semantica de link sau de buton, fără rol de filă, `aria-selected` sau relație cu panoul.

Utilizați `Tabs.Root`, `Tabs.List`, `Tabs.Tab`, `Tabs.Panel` și opționalul `Tabs.Indicator` pentru a comuta între panouri de conținut asociate. Păstrați comenzile de rută și de acțiune în afara `Tabs.List`.

## Navigare

Setați `href` pentru a reda un link nativ. Ruta curentă deține aspectul său `active` și valoarea `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>
);
```

Pentru rutarea pe partea clientului, furnizați linkul routerului prin `render`, setați `nativeButton={false}` și `role="link"` și transmiteți destinația rezolvată ca `href`. Păstrează opțiunile de stare și istoric ale rutei pe linkul routerului. Învelișurile personalizate trebuie să redirecționeze proprietățile furnizate și referința către ancora lor.

```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` explicit controlează contractul de interacțiune chiar și atunci când este prezent `href`. Potriviți-l cu elementul redat efectiv. Linkurile dezactivate își păstrează rolul de link și blochează activarea.

## Acțiuni

Fără `href`, controlul redă un buton nativ cu `type="button"`. Atributele native, referințele, stilurile, numele claselor și gestionarii de evenimente sunt transmise mai departe. `render` acceptă un element sau o funcție care primește proprietățile și starea Button. Referințele indică butonul sau ancora redată efectiv, inclusiv referințele furnizate pe un element compus.

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

Folosește `startIcon`, `endIcon` și `badge` pentru conținut auxiliar. Un avatar transmis într-un slot de pictogramă este decorativ atunci când textul denumește destinația. `size` păstrează contractul public pentru dimensiunea Button. O dimensiune explicită are prioritate față de dimensiunea unui `ButtonGroup` înconjurător; în caz contrar, componenta folosește implicit `sm`.

## Proprietăți

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