Если кнопки запускают действия, а не хранят выбор, возьмите CdsButtonGroup. Для выбора из длинного списка подойдёт CdsSelect, а в формах — CdsRadioGroup.

Вариации

Выбор

По умолчанию выбирается одна кнопка, повторный клик снимает выбор. В v-model попадает value кнопки, а если он не задан — её порядковый индекс.

Sandbox Storybook

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

const model = ref();
</script>

<template>
  <div class="flex flex-col items-center gap-2">
    <CdsButtonToggle v-model="model" variant="soft" color="neutral">
      <CdsButton text="Один" />
      <CdsButton text="Два" />
      <CdsButton text="Три" />
    </CdsButtonToggle>
    <span class="text-content-secondary">Выбрано: {{ model ?? '—' }}</span>
  </div>
</template>

Множественный выбор

Свойство multiple разрешает выбрать несколько кнопок — v-model становится массивом значений.

Sandbox Storybook

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

const model = ref([]);
</script>

<template>
  <div class="flex flex-col items-center gap-2">
    <CdsButtonToggle v-model="model" variant="soft" color="neutral" multiple>
      <CdsButton text="Жирный" />
      <CdsButton text="Курсив" />
      <CdsButton text="Подчёркнутый" />
    </CdsButtonToggle>
    <span class="text-content-secondary">Выбрано: {{ model.length ? model : '—' }}</span>
  </div>
</template>

Свойство max ограничивает число выбранных кнопок: когда лимит достигнут, клики по остальным кнопкам не добавляют выбор.

Sandbox Storybook

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

const model = ref([]);
</script>

<template>
  <div class="flex flex-col items-center gap-2">
    <CdsButtonToggle v-model="model" variant="soft" color="neutral" multiple :max="2">
      <CdsButton text="Утро" />
      <CdsButton text="День" />
      <CdsButton text="Вечер" />
      <CdsButton text="Ночь" />
    </CdsButtonToggle>
    <span class="text-content-secondary">Выбрано: {{ model.length }} из 2</span>
  </div>
</template>

Обязательный выбор

Свойство mandatory не даёт снять последний выбор — группа всегда остаётся в каком-то состоянии. Со значением 'force' первая доступная кнопка выбирается автоматически, даже если v-model пуст.

Sandbox Storybook

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

const model = ref('left');
</script>

<template>
  <div class="flex justify-center">
    <CdsButtonToggle v-model="model" variant="soft" color="neutral" mandatory>
      <CdsButton text="Слева" value="left" />
      <CdsButton text="По центру" value="center" />
      <CdsButton text="Справа" value="right" />
    </CdsButtonToggle>
  </div>
</template>

Цвет активной кнопки

Свойство active-color перекрашивает выбранные кнопки — выбор заметнее на панелях, где много элементов управления.

Sandbox Storybook

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

const model = ref(0);
</script>

<template>
  <div class="flex justify-center">
    <CdsButtonToggle v-model="model" variant="soft" color="neutral" active-color="green">
      <CdsButton text="День" />
      <CdsButton text="Неделя" />
      <CdsButton text="Месяц" />
    </CdsButtonToggle>
  </div>
</template>

Свойства группы

CdsButtonToggle построен на CdsButtonGroup и принимает все его свойства: variant и size применяются ко всем кнопкам сразу, вид по умолчанию — soft. Цвет выбранной кнопки задают active-color или color (по умолчанию brand), невыбранных — base-color (по умолчанию neutral); divided добавляет разделители, direction="vertical" разворачивает группу в столбец.

Sandbox Storybook

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

const horizontal = ref();
const vertical = ref();
</script>

<template>
  <div class="flex flex-wrap items-center justify-center gap-4">
    <CdsButtonToggle v-model="horizontal" variant="soft" color="neutral" divided>
      <CdsButton text="Один" />
      <CdsButton text="Два" />
      <CdsButton text="Три" />
    </CdsButtonToggle>

    <CdsButtonToggle v-model="vertical" variant="soft" color="neutral" direction="vertical" divided>
      <CdsButton text="Один" />
      <CdsButton text="Два" />
      <CdsButton text="Три" />
    </CdsButtonToggle>
  </div>
</template>

Рекомендации

Storybook

Сценарии использования

Вид отображения

Классика toggle-группы — переключение списка и плитки. Кнопки-иконки с aria-label экономят место, mandatory гарантирует, что список всегда отображается в одном из видов, а нейтральный вид по умолчанию и size="sm" не отвлекают от контента.

Sandbox Storybook

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

const view = ref('list');

const items = ['Ноутбук', 'Монитор', 'Клавиатура', 'Мышь'];
</script>

<template>
  <div class="m-auto flex w-full max-w-md flex-col gap-2">
    <div class="flex items-center justify-between">
      <span class="text-content-primary">Товары</span>

      <CdsButtonToggle v-model="view" mandatory variant="soft" color="neutral" size="sm">
        <CdsButton icon="list-bullet" value="list" aria-label="Список" />
        <CdsButton icon="view-rows" value="cards" aria-label="Плитка" />
      </CdsButtonToggle>
    </div>

    <ul v-if="view === 'list'" class="flex flex-col gap-1">
      <li v-for="item in items" :key="item" class="rounded-200 bg-surface-secondary px-2 py-1">{{ item }}</li>
    </ul>

    <div v-else class="grid grid-cols-2 gap-1">
      <div v-for="item in items" :key="item" class="rounded-200 bg-surface-secondary p-4 text-center">
        {{ item }}
      </div>
    </div>
  </div>
</template>

Панель форматирования

Стили текста независимы друг от друга, поэтому группа работает с multiple: каждая кнопка включает и выключает свой стиль, а v-model собирает выбранные значения в массив.

Sandbox Storybook

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

const format = ref<string[]>([]);
</script>

<template>
  <div class="flex flex-col items-center gap-2">
    <CdsButtonToggle v-model="format" variant="soft" color="neutral" multiple divided>
      <CdsButton icon="bold" value="bold" aria-label="Жирный" />
      <CdsButton icon="italic" value="italic" aria-label="Курсив" />
      <CdsButton icon="underline" value="underline" aria-label="Подчёркнутый" />
    </CdsButtonToggle>

    <p
      :class="{
        'font-bold': format.includes('bold'),
        italic: format.includes('italic'),
        underline: format.includes('underline')
      }"
    >
      Съешьте ещё этих мягких французских булок
    </p>
  </div>
</template>

Фильтр по периоду

Задайте кнопкам value — и v-model вернёт осмысленное значение, по которому удобно запрашивать данные. mandatory не даёт остаться без периода: показатели всегда относятся к выбранному диапазону.

Sandbox Storybook

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

const period = ref<'day' | 'week' | 'month'>('week');

const stats = {
  day: { orders: 12, sum: '48 000 ₽' },
  week: { orders: 84, sum: '316 000 ₽' },
  month: { orders: 367, sum: '1,4 млн ₽' }
};
</script>

<template>
  <div class="flex flex-col items-center gap-2">
    <CdsButtonToggle v-model="period" variant="soft" color="neutral" mandatory>
      <CdsButton text="День" value="day" />
      <CdsButton text="Неделя" value="week" />
      <CdsButton text="Месяц" value="month" />
    </CdsButtonToggle>

    <div class="flex w-[240px] flex-col items-center rounded-200 bg-surface-secondary p-4">
      <span class="text-900">{{ stats[period].orders }}</span>
      <span class="text-content-secondary">заказов на {{ stats[period].sum }}</span>
    </div>
  </div>
</template>

API

Пропсы

Имя	Тип	По умолчанию	Описание
activeColor	string | undefined	—	Цвет компонента, когда он находится в активном состоянии
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'	Переключение между горизонтальным или вертикальным отображением.
disabled	boolean | null | undefined	null	Заблокированное состояние
divided	boolean | undefined	—	Добавляет разделители между кнопками группы.
mandatory	boolean | "force" | undefined	—	Обязательный выбор хотя бы одного элемента
max	number | undefined	—	Максимальное количество выбираемых элементов
modelValue	any	—	Значение выбранных элементов группы
multiple	boolean | undefined	—	Разрешить множественный выбор
required	boolean | "force" | undefined	—	Обязательный выбор хотя бы одного элемента
selectedClass	string | undefined	—	CSS класс для выбранного состояния
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	'soft'	Вид кнопок: solid, soft, outline, surface, ghost

События

Имя	Тип	Описание
update:modelValue	[value: unknown]	Срабатывает при изменении выбранного значения.

Слоты

Имя	Тип	Описание
default	CdsButtonToggleSlotProps	Кнопки toggle-группы. В аргументах слота доступно состояние группы (выбор, навигация).

Exposed

Имя	Тип	Описание
isSelected	(id: string) => boolean	Проверить, выбрана ли кнопка по id
next	() => void	Выбрать следующую кнопку
prev	() => void	Выбрать предыдущую кнопку
select	(id: string, value: boolean) => void	Выбрать кнопку по id
selected	readonly string[]	Идентификаторы выбранных кнопок