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

> Группируйте связанные кнопки с общим оформлением и необязательной рамкой.

## Обзор

Задайте группе доступное имя и разместите внутри неё связанные кнопки. Группа объединяет смежные границы и может применять значения по умолчанию для размера, варианта и цвета. Кнопки сохраняют собственные позиции в порядке табуляции.

**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` координирует внешний вид, а не выбор. У него нет управляемого или неуправляемого режима выбора. Каждая кнопка получает собственный обработчик действия и состояние приложения; сведения о поведении при загрузке см. в [примере владения состоянием Button](https://docs.twenty.com/ru/ui/primitives/input/button.md#state-ownership).

Для взаимоисключающего выбора используйте [RadioGroup](https://docs.twenty.com/ru/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/ru/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.