Для перехода, оформленного как текст в абзаце, подойдёт CdsLink, а для выбора одного из вариантов — CdsButtonToggle.

Анатомия

Кнопка состоит из контейнера и трёх зон контента. Иконки задаются пропсами prepend-icon / append-icon или одноимёнными слотами, при loading контент замещается индикатором из слота loader.

Storybook

Вариации

Вид

Свойство variant задаёт, как нарисована кнопка. По умолчанию — solid.

Вид	Как выглядит	Когда
solid	заливка цветом	главное действие экрана
soft	полупрозрачный фон цвета	второстепенное действие
outline	рамка, фон прозрачный	второстепенное действие на плотном фоне
surface	рамка на подложке поверхности	действие поверх изображения или графика
ghost	ни фона, ни рамки	действие внутри панели, таблицы, тоста

Sandbox Storybook

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

const { variants } = CdsButton.constants;
</script>

<template>
  <div class="flex flex-wrap justify-center gap-4">
    <CdsButton v-for="variant of variants" :key="variant" :text="variant" :variant="variant" />
  </div>
</template>

Цвет

Свойство color задаёт цвет в любом виде. По умолчанию — brand. Принимает:

• роль: brand — цвет бренда, accent — акцентная кнопка (в ДС совпадает с brand, тема может её перекрасить), neutral — нейтральная, danger — необратимое действие, inverse — для тёмных подложек;
• алиас палитры: red, green, cyan, … black, white;
• имя токена темы: status-success-surface, other-lime-fill;
• любой CSS-цвет: #7c3aed, oklch(…).

Ховер, нажатие и недоступность для любого цвета строит плёнка состояний — отдельные токены на цвет не нужны.

Sandbox Storybook

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

const roles = ['brand', 'accent', 'neutral', 'danger'] as const;
</script>

<template>
  <div class="flex flex-col items-center gap-4">
    <div class="flex flex-wrap justify-center gap-4">
      <CdsButton v-for="color of roles" :key="color" :text="color" :color="color" />
    </div>

    <div class="flex flex-wrap justify-center gap-4">
      <CdsButton v-for="color of roles" :key="color" :text="color" variant="soft" :color="color" />
    </div>

    <div class="rounded-200 bg-surface-inverse flex flex-wrap justify-center gap-4 p-4">
      <CdsButton text="inverse" color="inverse" />
      <CdsButton text="inverse" variant="ghost" color="inverse" />
    </div>

    <div class="flex flex-wrap justify-center gap-4">
      <CdsButton text="green" color="green" />
      <CdsButton text="status-success-surface" color="status-success-surface" />
      <CdsButton text="#7c3aed" variant="outline" color="#7c3aed" />
    </div>
  </div>
</template>

Устаревшее свойство appearance

appearance продолжает работать и выводит пару variant + color, а в консоль разработки один раз на значение пишет [CDS UPGRADE]. Явно заданные variant и color важнее appearance.

appearance	variant	color
primary	solid	brand
secondary	soft	brand
tertiary	soft	neutral
inverse	solid	inverse
transparent	ghost	brand

Размеры

Свойство size меняет высоту и отступы кнопки. Размер по умолчанию — md.

Sandbox Storybook

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

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

<template>
  <div class="flex flex-wrap justify-center gap-4">
    <CdsButton v-for="size of sizes" :key="size" :text="'Button ' + size" :size="size" />
  </div>
</template>

Иконки

Свойства prepend-icon и append-icon добавляют иконку до и после текста из text.

Sandbox Storybook

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

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

<template>
  <div class="flex flex-wrap justify-center gap-4">
    <CdsButton
      v-for="look of looks"
      :key="look.text"
      prepend-icon="add"
      append-icon="settings"
      :text="look.text"
      :variant="look.variant"
      :color="look.color"
    />
  </div>
</template>

Свойство icon превращает кнопку в кнопку-иконку: текст скрывается, остаётся квадратная кнопка с одной иконкой.

Sandbox Storybook

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

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

<template>
  <div class="flex flex-wrap justify-center gap-4">
    <CdsButton
      v-for="look of looks"
      :key="look.text"
      icon="copy"
      :text="look.text"
      :variant="look.variant"
      :color="look.color"
    />
  </div>
</template>

Компоновка

Свойство block растягивает кнопку на всю ширину родительского контейнера.

Sandbox Storybook

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

<template>
  <div class="flex flex-col m-auto items-start gap-4 w-[400px]">
    <CdsButton block text="Block button" />
    <CdsButton block prepend-icon="add" append-icon="settings" text="Block button with icons" />
    <CdsButton text="Обычная кнопка" />
  </div>
</template>

Свойство stacked ставит иконку над текстом. Такая кнопка вдвое выше обычной того же размера, а её минимальная ширина равна высоте.

Sandbox Storybook

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

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

<template>
  <div class="flex flex-wrap justify-center gap-4">
    <CdsButton
      v-for="size of sizes"
      :key="size"
      stacked
      variant="soft"
      color="neutral"
      prepend-icon="settings"
      :text="'Button ' + size"
      :size="size"
    />
  </div>
</template>

Свойство spaced разводит слоты prepend и append к краям кнопки. Значение задаёт, с какой стороны от контента появляется свободное место: start — контент прижимается к append, end — к prepend, both — остаётся по центру. Эффект виден, только когда кнопка шире контента, поэтому обычно spaced работает в паре с block или заданной шириной.

Sandbox Storybook

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

<template>
  <div class="flex flex-col m-auto gap-4 w-[320px]">
    <CdsButton
      block
      variant="soft"
      color="neutral"
      prepend-icon="add"
      append-icon="settings"
      spaced="start"
      text="spaced=start"
    />
    <CdsButton
      block
      variant="soft"
      color="neutral"
      prepend-icon="add"
      append-icon="settings"
      spaced="end"
      text="spaced=end"
    />
    <CdsButton
      block
      variant="soft"
      color="neutral"
      prepend-icon="add"
      append-icon="settings"
      spaced="both"
      text="spaced=both"
    />
    <CdsButton block variant="soft" color="neutral" prepend-icon="add" append-icon="settings" text="без spaced" />
  </div>
</template>

Слоты

Слоты заменяют контент из пропсов, когда нужна полная свобода разметки.

Слот	Описание
prepend	Контент перед текстом. Замещает иконку из prepend-icon
default	Контент внутри кнопки. Замещает текст из text
append	Контент после текста. Замещает иконку из append-icon
loader	Загрузочный индикатор. Отображается вместо контента при loading

Sandbox Storybook

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

const loading = ref(false);

const onClick = async () => {
  loading.value = true;

  await new Promise((resolve) =>
    setTimeout(() => {
      loading.value = false;
      resolve(true);
    }, 3000)
  );
};
</script>

<template>
  <div class="flex justify-center">
    <CdsButton variant="soft" color="neutral" :loading="loading" @click="onClick">
      <template #prepend>
        <CdsIcon icon="settings" color="green" />
      </template>

      <span class="text-purple-500 font-bold">Click me</span>

      <template #append>
        <CdsIcon icon="copy" color="red" />
      </template>

      <template #loader>
        <CdsProgressCircle indeterminate color="yellow-light-500" />
      </template>
    </CdsButton>
  </div>
</template>

Кнопка-ссылка

Передайте href (или to с объектом RouteLocationRaw из vue-router) — и кнопка отрендерится тегом a со всеми атрибутами ссылки, сохранив внешний вид и свойства кнопки.

Sandbox Storybook

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

<template>
  <div class="flex justify-center">
    <CdsButton href="https://www.google.com" target="_blank" text="External Link" />
  </div>
</template>

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

Storybook

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

Отправка формы

Залитая кнопка запускает главное действие формы. Свойство loading показывает ход запроса и защищает от повторной отправки, а соседняя soft-кнопка цвета neutral даёт способ отказаться от действия.

Sandbox Storybook

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

const email = ref('');
const loading = ref(false);

const submit = async () => {
  loading.value = true;

  await new Promise((resolve) => setTimeout(resolve, 1500));

  loading.value = false;
};
</script>

<template>
  <form class="flex w-full max-w-md flex-col gap-4" @submit.prevent="submit">
    <CdsTextInput v-model="email" label="Рабочая почта" placeholder="name@company.ru" hint="Пришлём ссылку для входа" />

    <div class="flex gap-3">
      <CdsButton type="submit" text="Отправить приглашение" :loading="loading" />
      <CdsButton variant="soft" color="neutral" text="Отмена" :disabled="loading" />
    </div>
  </form>
</template>

Панель действий

Повторяющиеся действия над записью — редактировать, дублировать, удалить — удобно собрать в компактную панель из кнопок-иконок. Свойство icon убирает текст, size="sm" экономит место. Не забудьте aria-label: без текста он остаётся единственным названием действия.

Sandbox Storybook

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

<template>
  <div class="flex w-full max-w-md items-center justify-between gap-4">
    <span>Шаблон отчёта за квартал</span>

    <div class="flex gap-2">
      <CdsButton variant="soft" color="neutral" size="sm" icon="edit" aria-label="Редактировать" />
      <CdsButton variant="soft" color="neutral" size="sm" icon="copy" aria-label="Дублировать" />
      <CdsButton variant="soft" color="neutral" size="sm" icon="delete" aria-label="Удалить" />
    </div>
  </div>
</template>

Навигация по шагам

В мастерах и многошаговых формах залитая кнопка ведёт вперёд, soft — назад. Иконки-шевроны в prepend-icon и append-icon подчёркивают направление, а disabled закрывает движение за границы шагов.

Sandbox Storybook

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

const step = ref(2);
const totalSteps = 4;
</script>

<template>
  <div class="flex w-full max-w-md items-center justify-between m-auto gap-4">
    <CdsButton
      variant="soft"
      color="brand"
      prepend-icon="chevron-left"
      text="Назад"
      :disabled="step === 1"
      @click="step--"
    />

    <span>Шаг {{ step }} из {{ totalSteps }}</span>

    <CdsButton append-icon="chevron-right" text="Далее" :disabled="step === totalSteps" @click="step++" />
  </div>
</template>

API

Пропсы

Имя	Тип	По умолчанию	Описание
active	boolean | undefined	—	Управление активным состоянием компонента
activeColor	string | undefined	—	Цвет компонента, когда он находится в активном состоянии
appearancedeprecated	"inverse" | "primary" | "secondary" | "tertiary" | "transparent" | undefined	—	Внешний вид компонента. Устарел: используйте variant и color
appendIcon	IconValue | undefined	—	Иконка в слоте append после контента
baseColor	string | undefined	—	Цвет неактивного компонента
block	boolean | undefined	—	Растягивает кнопку на всю доступную ширину контейнера
color	(string & {}) | "neutral" | "brand" | "accent" | "danger" | "inverse" | undefined	'brand'	Цвет компонента: роль, алиас палитры, токен темы или CSS-цвет
content	string | number | undefined	—	Контент, отображаемый в компоненте.
disabled	boolean | null | undefined	null	Заблокированное состояние
exact	boolean | undefined	—	Если true, активное состояние будет применяться только при точном совпадении маршрута
height	string | number | undefined	—	Высота компонента
href	string | undefined	—	Атрибут href для ссылки. Если указан, компонент будет вести себя как обычная ссылка
icon	boolean | IconValue | undefined	—	Иконка, компонент будет отображаться в состоянии только иконки
loading	string | boolean | undefined	—	Индикатор загрузки для компонента
maxHeight	string | number | undefined	—	Максимальная высота компонента
maxWidth	string | number | undefined	—	Максимальная ширина компонента
minHeight	string | number | undefined	—	Минимальная высота компонента
minWidth	string | number | undefined	—	Минимальная ширина компонента
prependIcon	IconValue | undefined	—	Иконка в слоте prepend перед контентом
readonly	boolean | null | undefined	null	Только для чтения
replace	boolean | undefined	—	Если true, навигация по маршруту будет заменять текущую запись в истории вместо добавления новой
selectedClass	string | undefined	—	CSS класс для выбранного состояния
size	number | "xs" | "sm" | "md" | "lg" | "xl" | undefined	'md'	Размер компонента
spaced	"both" | "start" | "end" | undefined	—	Разводит слоты prepend и append к краям кнопки.
stacked	boolean | undefined	—	Располагает иконки и контент вертикально — иконка над текстом
tag	string | JSXComponent<any> | undefined	'button'	Пользовательский HTML-тег для отображения
text	string | number | undefined	—	Текст, отображаемый в компоненте.
theme	string | undefined	—	Тема компонента
to	LinkTo | undefined	—	Маршрут назначения или объект для RouterLink. Если указан, компонент будет вести себя как RouterLink
value	any	—	Значение компонента в группе
variant	"solid" | "soft" | "outline" | "surface" | "ghost" | undefined	'solid'	Вид компонента: solid, soft, outline, surface, ghost
width	string | number | undefined	—	Ширина компонента

События

Имя	Тип	Описание
group:selected	[value: { value: boolean; }]	Событие, возникающее при выборе кнопки в группе. value - булевое значение, указывающее, выбрана ли кнопка (true) или нет (false).

Слоты

Имя	Тип	Описание
append	any	Контент после текста
default	any	Контент внутри кнопки
loader	any	Загрузочный индикатор
prepend	any	Контент перед текстом

Exposed

Имя	Тип	Описание
group	GroupItemProvide | null	Возвращает текущий контекст группы, если эта кнопка используется в компоненте группы (например, CdsButtonGroup).