ButtonGroup

Группирует связанные действия формы или диалога: основное (primary), вторичное (secondary) и третичное (tertiary). Задаёт единый размер, расстояние между кнопками и отвечает за порядок, выравнивание и перенос при нехватке места.

Демо

Preview

Prop

Type

Value

break

boolean

centered

boolean

data-test-id

text

filled

boolean

renderAction

text

size

s | m | l

vertical

boolean

Code

<ButtonGroup break={false} centered={false} filled={false} size="m" vertical={false} primaryAction={"label":"Сохранить","appearance":"primary","view":"filled"} secondaryAction={"label":"Отмена","appearance":"neutral","view":"outline"} />

Когда использовать

В футере формы или диалога: «Сохранить / Отмена», «Продолжить / Назад».
Для toolbar-действий одного уровня, которые нужно визуально связать.
Когда нужно одинаково растянуть все кнопки на ширину контейнера (filled).

Когда не подходит: если действий больше трёх — используйте меню или split-button. Если действия разного приоритета и логики (напр. «Удалить» + «Настройки») — оставляйте их как независимые Button.

Анатомия

Size

Единый размер всех кнопок в группе — задаётся на корне: s — для плотных поверхностей, m — дефолт, l — для крупных форм. Отдельные кнопки не могут переопределить размер.

Установка

pnpm add @cloud-ru/ds-button

import { ButtonGroup } from '@cloud-ru/ds-button'

Примеры использования

1. Пара главное + вторичное

1. Пара главное + вторичноеТипичный футер формы

tsx

import { ButtonGroup } from '@cloud-ru/ds-button';

export function ButtonGroupPrimarySecondary() {
  return (
    <ButtonGroup
      primaryAction={{ label: 'Сохранить', appearance: 'primary', view: 'filled' }}
      secondaryAction={{ label: 'Отмена', appearance: 'neutral', view: 'outline' }}
    />
  );
}

2. Три действия

2. Три действияtertiary / secondary / primary — порядок слева направо зафиксирован

tsx

import { ButtonGroup } from '@cloud-ru/ds-button';

export function ButtonGroupThreeActions() {
  return (
    <ButtonGroup
      primaryAction={{ label: 'Сохранить', appearance: 'primary', view: 'filled' }}
      secondaryAction={{ label: 'Отмена', appearance: 'neutral', view: 'outline' }}
      tertiaryAction={{ label: 'Помощь', appearance: 'neutral', view: 'simple' }}
    />
  );
}

3. Вертикальная группа

3. Вертикальная группаprimary снизу — ближе к большому пальцу на мобильных

tsx

import { ButtonGroup } from '@cloud-ru/ds-button';

export function ButtonGroupVertical() {
  return (
    <ButtonGroup
      vertical
      primaryAction={{ label: 'Сохранить', appearance: 'primary', view: 'filled' }}
      secondaryAction={{ label: 'Отмена', appearance: 'neutral', view: 'outline' }}
      tertiaryAction={{ label: 'Помощь', appearance: 'neutral', view: 'simple' }}
    />
  );
}

4. Заливка (filled)

4. Заливка (filled)Кнопки растягиваются на всю ширину контейнера

tsx

import { ButtonGroup } from '@cloud-ru/ds-button';

export function ButtonGroupFilled() {
  return (
    <div style={{ width: 320 }}>
      <ButtonGroup
        filled
        primaryAction={{ label: 'Применить', appearance: 'primary', view: 'filled' }}
        secondaryAction={{ label: 'Сбросить', appearance: 'neutral', view: 'outline' }}
      />
    </div>
  );
}

5. Распорка через break

5. Распорка через breaktertiary слева, primary справа — wizard-футер

tsx

import { ButtonGroup } from '@cloud-ru/ds-button';

export function ButtonGroupBreak() {
  return (
    <div style={{ width: 480 }}>
      <ButtonGroup
        break
        tertiaryAction={{ label: 'Назад', appearance: 'neutral', view: 'simple' }}
        primaryAction={{ label: 'Продолжить', appearance: 'primary', view: 'filled' }}
      />
    </div>
  );
}

Props

Types

PropsButtonGroupProps

Prop	Type	Default	Required	Description
`break`	`boolean`	`false`	no	Перенос на новую строку при нехватке места
`centered`	`boolean`	`false`	no	Центрирование по горизонтали
`className`	`string`	—	no	Дополнительный класс
`data-test-id`	`string`	—	no
`filled`	`boolean`	`false`	no	Заливка контейнера
`primaryAction`	`ActionProps`	—	no	Основное действие (filled)
`renderAction`	`((button: ReactNode, slot: ButtonGroupActionSlot) => ReactNode)`	—	no	Обёртка каждой кнопки. Получает готовый `<Button>` и слот действия (`primary`/`secondary`/`tertiary`) и возвращает узел, который встанет на место кнопки. Позволяет обернуть кнопку в `Tooltip` на стороне потребителя (сам `@cloud-ru/ds-button` не зависит от `@cloud-ru/ds-tooltip`). Чтобы не ломать раскладку `filled`, обёртка не должна добавлять лишний DOM-узел между группой и кнопкой (`Tooltip` — с `disableSpanWrapper`).
`secondaryAction`	`ActionProps`	—	no	Вторичное действие (outline), опционально
`size`	`"l" \| "m" \| "s"`	`m`	no	Размер кнопок
`tertiaryAction`	`ActionProps`	—	no	Третичное действие (simple/text-only), опционально
`vertical`	`boolean`	`false`	no	Вертикальное расположение

ButtonGroup

Демо

Когда использовать

Анатомия

Size

Установка

Примеры использования

1. Пара главное + вторичное

2. Три действия

3. Вертикальная группа

4. Заливка (filled)

5. Распорка через break

Props

Types

Unions

Types

ButtonGroupProps

Unions

Storybook

Figma

Смотри также

ButtonGroup

Демо

Когда использовать

Анатомия

Size

Установка

Примеры использования

1. Пара главное + вторичное

2. Три действия

3. Вертикальная группа

4. Заливка (filled)

5. Распорка через break

Props

Types

ActionPropstype

Unions

Sizeunion

Types

ButtonGroupProps

ActionProps

Unions

Size

Storybook

Figma

Смотри также

`ActionProps`type

`Size`union