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

# ButtonGroup

> جمّع الأزرار ذات الصلة ذات المظهر المشترك والإطار الاختياري.

## نظرة عامة

امنح المجموعة اسمًا متاحًا وضع الأزرار ذات الصلة داخلها. تضم المجموعة الحدود المتجاورة ويمكنها تطبيق الإعدادات الافتراضية للحجم والمتغير واللون. تحتفظ الأزرار بمحطات Tab الخاصة بها.

**Light**

[مجموعة الأزرار (light)](https://storybook.twenty.com/iframe.html?id=ui-input-button-buttongroup--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[مجموعة الأزرار (dark)](https://storybook.twenty.com/iframe.html?id=ui-input-button-buttongroup--display\&viewMode=story\&globals=colorScheme:dark)

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

## استخدام

```tsx theme={null}
import { IconCheckbox, IconNotes, IconTimelineEvent } from 'twenty-ui/icon';
import { Button, ButtonGroup } from 'twenty-ui/primitives/input';

export const ActivityActions = () => (
  <ButtonGroup aria-label="Create activity" size="sm">
    <Button startIcon={<IconNotes />}>Note</Button>
    <Button startIcon={<IconCheckbox />}>Task</Button>
    <Button startIcon={<IconTimelineEvent />}>Activity</Button>
  </ButtonGroup>
);
```

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

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

لخيار متنافيًا بشكل متبادل، استخدم [RadioGroup](https://docs.twenty.com/ar/ui/primitives/input/radio-group.md)، الذي يملك التحديد لعناصر التحكّم اللاسلكية الخاصة به.

## أسبقية المظهر

تُحل كل خاصية مظهر بشكل مستقل: خاصية الطفل الصريحة، ثم الإعداد الافتراضي للمجموعة، ثم الإعداد الافتراضي للمكوّن. ينطبق هذا على كل من Button وIconButton، بما في ذلك `IconButton size="xs"` الصريح. تصل الإعدادات الافتراضية إلى العناصر الفرعية عبر الأجزاء والأغلفة ومرتكزات تلميحات الأدوات.

يمكن للمجموعة توفير `color="inherit"` على سطح ملوّن. يجب أن يُحلّ العنصر الفرعي الذي يرث اللون إلى صيغة غير مصمتة أيضًا. تتقدم تجاوزات لون العنصر الفرعي وصيغته الصريحة، لذا يمكن للعنصر الفرعي اختيار صيغة غير مصمتة أو لون دلالي عندما توفّر المجموعة لونًا مصمتًا والوراثة معًا.

أبقِ الأزرار المتصلة بالحجم نفسه بحيث تتراصف حوافها. يتجاوز هذا المثال المتغير واللون مع وراثة حجم المجموعة.

```tsx theme={null}
import { Button, ButtonGroup } from 'twenty-ui/primitives/input';

export const ActivityActions = () => (
  <ButtonGroup
    aria-label="Activity actions"
    variant="solid"
    color="accent"
    size="sm"
  >
    <Button variant="ghost" color="danger">
      Delete activity
    </Button>
    <Button color="neutral">Duplicate activity</Button>
    <Button>New activity</Button>
  </ButtonGroup>
);
```

**Light**

[مظهر فردي في مجموعة أزرار (light)](https://storybook.twenty.com/iframe.html?id=ui-input-button-buttongroup--appearance-overrides\&viewMode=story\&globals=colorScheme:light)

**Dark**

[مظهر فردي في مجموعة أزرار (dark)](https://storybook.twenty.com/iframe.html?id=ui-input-button-buttongroup--appearance-overrides\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-input-button-buttongroup--appearance-overrides)

## عناصر تحكّم منفصلة

عيّن `attached={false}` للحفاظ على الزوايا المستديرة لكل عنصر تحكّم وفجوة قدرها 2px. تظل الإعدادات الافتراضية للمجموعة سارية عبر الأغلفة وارتكازات تلميحات الأدوات؛ وتكون لخصائص العناصر الفرعية الصريحة الأولوية.

## عناصر تحكّم مؤطّرة

عيّن `framed` لإضافة خلفية شبه شفافة وحدود وحشوة بمقدار 2px وزوايا متحدة المركز. يعمل الإطار مع عناصر التحكّم المتصلة أو المنفصلة ويحافظ على المظهر الصريح للعناصر الفرعية. استخدم `size="xs"` على [IconButton](https://docs.twenty.com/ar/ui/components/input/icon-button.md) للإجراءات المدمجة بحجم 20px.

**Light**

[مجموعة الأزرار المؤطّرة (light)](https://storybook.twenty.com/iframe.html?id=ui-components-iconbutton--framed-group-documentation\&viewMode=story\&globals=colorScheme:light)

**Dark**

[مجموعة الأزرار المؤطّرة (dark)](https://storybook.twenty.com/iframe.html?id=ui-components-iconbutton--framed-group-documentation\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-components-iconbutton--framed-group-documentation)

```tsx theme={null}
import { IconButton } from 'twenty-ui/components/input';
import { IconPlus, IconTrash } from 'twenty-ui/icon';
import { ButtonGroup } from 'twenty-ui/primitives/input';

export const CompactRecordActions = () => (
  <ButtonGroup framed attached={false} aria-label="Record actions">
    <IconButton size="xs" aria-label="Add" variant="ghost">
      <IconPlus />
    </IconButton>
    <IconButton size="xs" aria-label="Delete" variant="ghost" disabled>
      <IconTrash />
    </IconButton>
  </ButtonGroup>
);
```

## تحديث المجموعات الموجودة

استبدل `IconButtonGroup` ومصفوفة `iconButtons` الخاصة به بـ `ButtonGroup framed attached={false}` وعناصر فرعية صريحة. استبدل `InsideButton` بـ `LightIconButton size="xs"`. يمتلك كل زر اسمه المتاح ومعالج الإجراء وحالة التعطيل وتلميح الأداة الاختياري.

## الإزاحة

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

Join adjacent controls. Set to false for independently rounded buttons with a 2px gap.

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

Default semantic color for children without an explicit color. Inherited color requires each child to resolve to a non-solid variant; explicit child overrides take precedence.

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

Add a translucent frame with padding and concentric corners. Button sizes and appearance remain independent unless set on the group.

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

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.

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

Default button height for children without an explicit size.

**variant** `"ghost" | "link" | "outline" | "soft" | "solid"`

Default surface treatment for children without an explicit variant.


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