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

# MainButton

> اعرض الإجراءات البارزة باستخدام إعدادات التصميم الافتراضية المشتركة.

## نظرة عامة

استخدم المكوّن المشترك `MainButton` لإجراء بارز. يتكوّن من
[Button](https://docs.twenty.com/ar/ui/primitives/input/button.md) مع سطح مصمت، وارتفاع، ونص شبه عريض، وحشوة أفقية بمقدار 12px. لونه الافتراضي محايد وحجمه هو `md`.

**Light**

[مثال MainButton (light)](https://storybook.twenty.com/iframe.html?id=ui-components-mainbutton--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[مثال MainButton (dark)](https://storybook.twenty.com/iframe.html?id=ui-components-mainbutton--display\&viewMode=story\&globals=colorScheme:dark)

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

## استخدام

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

export const SaveAction = () => <MainButton>Save changes</MainButton>;
```

## الخيارات المرئية

قارن بين المظهرين المصمت والمحدد عبر الأحجام الافتراضية والصغيرة، بالإضافة إلى حالتي التعطيل والتحميل.

**Light**

[متغيرات الزر الرئيسي وحالاته (light)](https://storybook.twenty.com/iframe.html?id=ui-components-mainbutton--catalog\&viewMode=story\&globals=colorScheme:light)

**Dark**

[متغيرات الزر الرئيسي وحالاته (dark)](https://storybook.twenty.com/iframe.html?id=ui-components-mainbutton--catalog\&viewMode=story\&globals=colorScheme:dark)

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

## ملكية الحالة

يستخدم `MainButton` نموذج حالة Button ولا يضيف أي حالة خاصة به. يوفّر تطبيقك `loading` و`disabled`؛ ولا توجد أوضاع تحديد مضبوطة وغير مضبوطة. راجع [مثال ملكية حالة Button](https://docs.twenty.com/ar/ui/primitives/input/button.md#state-ownership) لإدارة إجراء غير متزامن.

## الأشكال والعرض

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

export const SaveProfile = () => (
  <MainButton type="submit" fullWidth>
    Save profile
  </MainButton>
);
```

يتبع العرض المحتوى ما لم تضبط `fullWidth` أو توفّر تنسيق
تخطيط للتطبيق. تجاوز `variant` و`color` و`size` و`elevated` حسب الحاجة؛
على سبيل المثال، استخدم `variant="outline"` و`elevated={false}` لإجراء ذي مخطط خارجي.

باستخدام `color="inherit"`، اختر صيغة غير ممتلئة صراحةً أو ورّث واحدة من ButtonGroup. تؤدي القيمة الافتراضية الممتلئة المستقلة ذات اللون الموروث إلى ظهور خطأ وقت التشغيل.

أبقِ تخطيط الصفحة ضمن تنسيق تطبيقك.

## التفاعل

يقبل `MainButton` سمات `Button` الأصلية، ومعالجات الأحداث، والمراجع، ومواضع الأيقونات،
وخصائص `loading` و`disabled`. تكون الأزرار افتراضيًا من `type="button"`؛
اضبط `type="submit"` صراحةً لإرسال النموذج.

استخدم `href` لرابط. وفّر `render` لاختيار جذر مخصص، بما في ذلك
رابط موجّه يملكه التطبيق. عيّن `nativeButton={false}` و`role="link"` لـ
عارض تنقّل. تُبقي الأزرار الأصلية المخصصة `nativeButton` مضبوطًا على true.

يمكن لـ [ButtonGroup](https://docs.twenty.com/ar/ui/primitives/input/button-group.md) تعيين حجم وسطح
ولون مشتركين. يأخذ مظهر العنصر الفرعي المحدد صراحةً الأسبقية على المجموعة، يليه
الإعدادات الافتراضية للمكوّن. تُمرَّر فئات المستهلك، بما في ذلك دوال الحالة،
إلى الجذر.

## الخصائص

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

**color** `"accent" | "danger" | "inherit" | "neutral" | "success"`

Semantic color of the button. `inherit` uses the surrounding text color for the label, icons, loader, and outline border, with translucent black interaction surfaces. It supports outline, ghost, soft, and link. Resolving solid with inherit throws, including appearance inherited from ButtonGroup and wrapper defaults.

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

Adds a shadow and backdrop blur. Neutral outline buttons also use elevated surface colors.

**endIcon** `ReactNode`

Decorative content displayed after the label.

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

Whether the button should be focusable when disabled.

**fullWidth** `boolean`

Expands the button to fill its container width.

**href** `string`

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

**loading** `boolean`

Shows a loading indicator and disables activation.

**loadingPosition** `"center" | "end" | "start"`

Where the loading indicator appears. `center` hides the content while preserving its layout space; `start` and `end` keep children and the opposite icon visible and replace the corresponding icon with the spinner.

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

**shortcut** `ShortcutDefinition`

Flat key array for simultaneous keys, or nested key arrays for an ordered sequence. Displayed on non-mobile screens.

**shortcutJoinLabel** `string`

Localized text between sequence steps. Defaults to then.

**size** `"md" | "sm"`

Button height: `sm` (24px) or `md` (32px). The `link` variant uses its content height at either size.

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

**variant** `"ghost" | "link" | "outline" | "soft" | "solid"` (default: solid)

Visual treatment of the button surface. `link` uses compact text styling without a filled surface or border; render composition determines native semantics.


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