P-01 · Patterns · Stable

Buttons Group

Составная группа кнопок — правила размещения, порядка и выравнивания в горизонтальных и вертикальных наборах. Единственный уникальный токен — gap между элементами.

Layouts

Horizontal · Vertical
Horizontal · MD · gap 20px
Vertical · MD · gap 20px
SM
MD
LG
SM · MD · LG с опциональным Link Text

Правила выравнивания

4 контекста использования
Modal / Drawer
Модальное окно или боковая панель. Группа прижата к правому краю футера.
Popover / Inline Form
Форма в контексте страницы или всплывающая форма. Группа прижата к левому краю.
Empty State
Здесь пока ничего нет. Создайте первую запись или импортируйте данные.
Stepper
Многошаговый процесс. «Назад» прижат к левому краю, «Далее» — к правому.

Токены

Gap — единственный уникальный токен
Свойство
SM
MD
LG
Gap
16px
20px
24px
CSS-токен
--ds-bg-sm-gap
--ds-bg-md-gap
--ds-bg-lg-gap
Button size
btn-sm · 32px
btn-md · 40px
btn-lg · 48px

Gap = container-pad × 2 для каждого размера (value coincidence — не алиасировать). XL существует в Figma, в продукте не используется. Все параметры дочерних кнопок — алиасы var(--btn-*), параметры Link Text — алиасы var(--link-*).

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

Состав · Порядок · Ширина
Порядок кнопок

Primary ближе к контенту

Позиция Primary определяется контекстом, а не произволом:

  • Modal / Drawer → Primary крайняя правая
  • Form / Popover → Primary крайняя левая
  • Stepper → Назад слева, Далее справа
  • Empty State → оба действия центрированы
Состав группы

Максимум 3 элемента

Primary + до двух Secondary и опционально Link Text. Больше 3 кнопок — убирай в меню «...».

  • Primary (Neutral Solid) — ровно один
  • Secondary (Neutral Outline / Ghost) — один–два
  • Link Text — не считается кнопкой, стоит последним
Ширина кнопок

Hug content по умолчанию

Кнопки оборачивают содержимое. Исключение: вертикальный Buttons Group в мобильном контексте — Fill container на всю ширину блока.

Запрещено

Не допускается

  • Смешивать размеры кнопок в одной группе
  • Два Primary в одной группе
  • Деструктивный Primary рядом с Secondary без пространственного разделения
  • Link Text левее кнопок
  • XL-группы в продуктовых экранах

Иерархия дочерних кнопок

Primary · Secondary · Tertiary · Link Text
Слот
Button variant
Когда использовать
Primary
Neutral Solid
Главное действие — одно на контейнер. Brand Solid в группе не используется: слишком акцентный, визуально конкурирует с Negative. Используйте Primary-Soft вместо Solid, когда в контейнере есть конкурирующий акцентный элемент. Brand — только одиночный CTA.
Secondary
Outline
Альтернативное или противоположное действие. В паре с Primary: «Далее / Назад», «Сохранить / Отмена». Desktop — не более 3; Mobile — не более 2.
Tertiary
Ghost
Редкие и вспомогательные действия: «Печать», «Экспорт», «Справка». Не использовать для ключевых CTA.
Link Text
Link
Самое низкоприоритетное действие — «Подробнее», «Справка». Не считается кнопкой, стоит последним.
Primary → Secondary → Tertiary → Link Text

Исключения

Wizard · Toolbar · Узкий контейнер · Логин
Шаговые формы

Wizard, онбординг, мастер настройки

«Назад» прижата к левому краю, «Далее» — к правому. Используется justify-content: space-between.

Тулбары

Панели действий над контентом

Размещаются над контролируемым контентом. Выравнивание — по правому краю. Порядок справа налево: Primary ← Secondary ← Tertiary.

Узкий контейнер

Горизонтальная группа не помещается

При нехватке ширины кнопки растягиваются на всю ширину и располагаются вертикально сверху вниз по убыванию приоритета.

Страницы входа

Логин и регистрация

Узкий центральный контейнер (320–400 px) — вертикальная группа, кнопки на всю ширину. Порядок сверху вниз: Primary → Secondary → Tertiary.

Работа с клавиатурой и доступность

WCAG 2.2 AA
Семантика

ARIA и нативный HTML

  • Buttons Group не имеет собственной ARIA-роли — нативный контейнер <div>
  • Каждая дочерняя кнопка — нативный <button> с role="button"
  • Icon-only кнопки внутри группы — обязателен aria-label или Tooltip
Контраст и touch

Визуальные требования

  • Контраст текста ≥ APCA Lc 60 (кнопки ≥ 16 px)
  • Контраст текста ≥ APCA Lc 90 (кнопки < 16 px)
  • Touch target ≥ 40 × 40 px на Mobile
  • Отступ между кнопками ≥ 8 px — во избежание случайных нажатий
Клавиша
Действие
Tab
Фокус на первую кнопку согласно визуальному порядку (Primary первой)
Tab (повторно)
Следующая кнопка слева направо
Shift + Tab
Предыдущая кнопка
Enter / Space
Активировать кнопку в фокусе

Связанные компоненты

B
Button
03 · Stable — все варианты, размеры, состояния, правила иконок и деструктивных действий
→

State Explorer

Интерактивный тест состояний — переключай и смотри