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

> اعرض روابط المسارات والإجراءات بجانب علامات التبويب بتنسيق متسق.

## نظرة عامة

استخدم `TabButton` لروابط المسارات والإجراءات، مثل إضافة علامة تبويب أو فتح قائمة الفائض. يتشارك مظهر [علامات التبويب](https://docs.twenty.com/ar/ui/primitives/navigation/tabs.md) ويستخدم [الزر](https://docs.twenty.com/ar/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`. احتفظ بحالة المسار وخيارات السجل على رابط الموجّه. يجب أن تمرّر الأغلفة المخصصة الخصائص والمرجع الموفَّرين إلى رابطها.

```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"`. تمرّ السمات الأصلية والمراجع والأنماط وأسماء الفئات ومعالجات الأحداث كما هي. يقبل `render` عنصرًا أو دالةً تتلقى خصائص Button وحالته. تشير المراجع إلى الزر أو الرابط المعروض فعليًا، بما في ذلك المراجع الموفَّرة على عنصر مركب.

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