Если пользователь не запускает действие, а выбирает один из вариантов, используйте CdsButtonToggle — он сохраняет выбранное состояние.

Вариации

Свойства variant, color, base-color и size группа передаёт всем кнопкам внутри — повторять их на каждой кнопке не нужно. Свойство, заданное на самой кнопке, важнее значения группы.

Вид и цвет

variant и color задают вид и цвет всех кнопок группы — от залитой solid для главного набора действий до color="inverse" для тёмных подложек. Устаревший appearance тоже работает и выводит ту же пару, что у CdsButton.

Sandbox Storybook

<script setup lang="ts">
import { CdsButton, CdsButtonGroup } from '@central-design-system/components';

const looks = [
  { variant: 'solid', color: 'brand' },
  { variant: 'soft', color: 'brand' },
  { variant: 'soft', color: 'neutral' }
] as const;
</script>

<template>
  <div class="flex flex-col items-center gap-4">
    <CdsButtonGroup
      v-for="look of looks"
      :key="look.variant + look.color"
      :variant="look.variant"
      :color="look.color"
      divided
    >
      <CdsButton text="Копировать" />
      <CdsButton text="Переместить" />
      <CdsButton text="Удалить" />
    </CdsButtonGroup>

    <div class="rounded-200 bg-surface-inverse p-4">
      <CdsButtonGroup variant="solid" color="inverse" divided>
        <CdsButton text="Копировать" />
        <CdsButton text="Переместить" />
        <CdsButton text="Удалить" />
      </CdsButtonGroup>
    </div>
  </div>
</template>

Размеры

size меняет высоту и отступы всех кнопок разом — группа в панели фильтров и группа в шапке таблицы остаются согласованными.

Sandbox Storybook

<script setup lang="ts">
import { CdsButton, CdsButtonGroup } from '@central-design-system/components';

const { sizes } = CdsButtonGroup.constants;
</script>

<template>
  <div class="flex flex-col items-center gap-4">
    <CdsButtonGroup v-for="size of sizes" :key="size" :size="size" variant="soft" color="brand" divided>
      <CdsButton :text="'Назад ' + size" prepend-icon="arrow-left" />
      <CdsButton :text="'Вперёд ' + size" append-icon="arrow-right" />
    </CdsButtonGroup>
  </div>
</template>

Цвет

color красит фон кнопок алиасом палитры. Берите статусные цвета, когда группа целиком относится к одному исходу — принять или отклонить.

Sandbox Storybook

<script setup lang="ts">
import { CdsButton, CdsButtonGroup } from '@central-design-system/components';
</script>

<template>
  <div class="flex flex-wrap items-center justify-center gap-4">
    <CdsButtonGroup color="status-success-fill" divided>
      <CdsButton text="Принять" prepend-icon="check" />
      <CdsButton text="Принять все" />
    </CdsButtonGroup>

    <CdsButtonGroup color="status-danger-fill" divided>
      <CdsButton text="Отклонить" prepend-icon="remove" />
      <CdsButton text="Отклонить все" />
    </CdsButtonGroup>
  </div>
</template>

Разделители и направление

Без divided кнопки стоят вплотную, с ним между ними появляется линия — так соседние действия не сливаются. direction="vertical" разворачивает группу в столбец, например для кнопок масштаба на карте.

Sandbox Storybook

<script setup lang="ts">
import { CdsButton, CdsButtonGroup } from '@central-design-system/components';
</script>

<template>
  <div class="flex flex-wrap items-center justify-center gap-4">
    <CdsButtonGroup variant="soft" color="brand">
      <CdsButton text="Скачать" prepend-icon="download" />
      <CdsButton text="Печать" prepend-icon="print" />
    </CdsButtonGroup>

    <CdsButtonGroup variant="soft" color="neutral" divided>
      <CdsButton text="Копировать" prepend-icon="copy" />
      <CdsButton text="Переместить" prepend-icon="paste" />
      <CdsButton text="Удалить" prepend-icon="delete" />
    </CdsButtonGroup>

    <CdsButtonGroup variant="soft" color="brand" direction="vertical" divided>
      <CdsButton icon="add" aria-label="Приблизить" />
      <CdsButton icon="minus" aria-label="Отдалить" />
    </CdsButtonGroup>
  </div>
</template>

API

Пропсы

Имя	Тип	По умолчанию	Описание
appearancedeprecated	"inverse" | "primary" | "secondary" | "tertiary" | "transparent" | undefined	—	Внешний вид компонента. Устарел: используйте variant и color
baseColor	string | undefined	—	Цвет неактивного компонента
color	(string & {}) | "neutral" | "brand" | "accent" | "danger" | "inverse" | undefined	'brand'	Цвет компонента: роль, алиас палитры, токен темы или CSS-цвет
direction	"horizontal" | "vertical" | undefined	'horizontal'	Переключение между горизонтальным или вертикальным отображением.
divided	boolean | undefined	—	Добавляет разделители между кнопками группы.
size	number | "xs" | "sm" | "md" | "lg" | "xl" | undefined	'md'	Размер компонента
tag	string | JSXComponent<any> | undefined	'div'	Пользовательский HTML-тег для отображения
theme	string | undefined	—	Тема компонента
variant	"solid" | "soft" | "outline" | "surface" | "ghost" | undefined	'solid'	Вид компонента: solid, soft, outline, surface, ghost

Слоты

Имя	Тип	Описание
default	any	Кнопки группы.