Главное действие экрана — «Сохранить», «Отправить заявку» — оформляйте CdsButton, переход внутри абзаца — CdsLink. Если иконка ничего не запускает, а просто поясняет контент, оставьте CdsIcon.

Вариации

Иконка

Свойство icon задаёт иконку — обычный вид функциональной кнопки. Текста у такой кнопки нет, поэтому добавьте aria-label: он останется единственным названием действия.

Sandbox Storybook

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

const actions = [
  { icon: 'edit', label: 'Редактировать' },
  { icon: 'copy', label: 'Дублировать' },
  { icon: 'download', label: 'Скачать' },
  { icon: 'delete', label: 'Удалить' },
  { icon: 'more-vertical', label: 'Ещё' }
];
</script>

<template>
  <div class="flex flex-wrap items-center justify-center gap-2">
    <CdsFunctionalButton v-for="action of actions" :key="action.icon" :icon="action.icon" :aria-label="action.label" />
  </div>
</template>

Контент

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

Sandbox Storybook

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

<template>
  <div class="flex flex-wrap items-center justify-center gap-2">
    <CdsFunctionalButton>Показать все</CdsFunctionalButton>
    <CdsFunctionalButton>+3</CdsFunctionalButton>
  </div>
</template>

Состояния

Свойство loading показывает ход операции вместо иконки, disabled гасит кнопку и запрещает нажатие, readonly оставляет кнопку обычной на вид, но убирает её из фокуса и не пускает клик.

Sandbox Storybook

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

<template>
  <div class="flex flex-wrap items-center justify-center gap-4">
    <CdsFunctionalButton icon="save" aria-label="Сохранить" />
    <CdsFunctionalButton icon="save" aria-label="Сохранение" loading />
    <CdsFunctionalButton icon="save" aria-label="Сохранить" disabled />
    <CdsFunctionalButton icon="save" aria-label="Сохранить" readonly />
  </div>
</template>

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

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

Sandbox Storybook

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

<template>
  <div class="flex justify-center">
    <CdsFunctionalButton
      icon="external-link"
      href="https://github.com"
      target="_blank"
      rel="noreferrer"
      aria-label="Открыть исходный код"
    />
  </div>
</template>

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

Storybook

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

Действия в строке списка

Скачать и удалить — действия над конкретной записью, а не над экраном. Кнопки стоят у правого края строки, а aria-label с названием документа отличает кнопки соседних строк друг от друга.

Sandbox Storybook

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

const documents = ref([
  { id: 1, name: 'Договор поставки № 42.pdf', size: '340 КБ' },
  { id: 2, name: 'Спецификация.xlsx', size: '82 КБ' },
  { id: 3, name: 'Акт сверки за март.pdf', size: '128 КБ' }
]);

const remove = (id: number) => {
  documents.value = documents.value.filter((document) => document.id !== id);
};
</script>

<template>
  <div class="m-auto flex w-[360px] flex-col gap-2">
    <div v-for="document of documents" :key="document.id" class="flex items-center gap-2">
      <CdsIcon icon="file" size="lg" color="content-secondary" />

      <div class="flex min-w-0 flex-col">
        <span class="truncate">{{ document.name }}</span>
        <span class="text-100 text-content-secondary">{{ document.size }}</span>
      </div>

      <div class="ml-auto flex gap-1">
        <CdsFunctionalButton icon="download" :aria-label="`Скачать ${document.name}`" />
        <CdsFunctionalButton icon="delete" :aria-label="`Удалить ${document.name}`" @click="remove(document.id)" />
      </div>
    </div>

    <span v-if="!documents.length" class="text-content-secondary">Все документы удалены</span>
  </div>
</template>

Кнопка внутри поля ввода

В слотах append-inner и prepend-inner полей ввода функциональная кнопка попадает точно в размер поля. Здесь она переключает type между password и text, а aria-label меняется вместе с иконкой.

Sandbox Storybook

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

const password = ref('qwerty123');
const visible = ref(false);
</script>

<template>
  <CdsTextInput
    v-model="password"
    class="m-auto w-full max-w-md"
    label="Пароль"
    :type="visible ? 'text' : 'password'"
    hint="Минимум 8 символов"
  >
    <template #append-inner>
      <CdsFunctionalButton
        :icon="visible ? 'visibility-off' : 'visibility'"
        :aria-label="visible ? 'Скрыть пароль' : 'Показать пароль'"
        @click="visible = !visible"
      />
    </template>
  </CdsTextInput>
</template>

Копирование значения

Кнопка рядом со значением копирует его в буфер обмена: loading показывает короткую операцию, а иконка check подтверждает результат и через пару секунд возвращается к copy.

Sandbox Storybook

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

const account = '40702810900000012345';

const loading = ref(false);
const copied = ref(false);

const copy = () => {
  loading.value = true;

  setTimeout(() => {
    loading.value = false;
    copied.value = true;

    setTimeout(() => (copied.value = false), 2000);
  }, 600);
};
</script>

<template>
  <div class="m-auto flex w-[320px] items-center gap-2">
    <div class="flex min-w-0 flex-col">
      <span class="text-100 text-content-secondary">Расчётный счёт</span>
      <span class="truncate">{{ account }}</span>
    </div>

    <CdsFunctionalButton
      class="ml-auto"
      :icon="copied ? 'check' : 'copy'"
      :loading="loading"
      :aria-label="copied ? 'Номер скопирован' : 'Скопировать номер счёта'"
      @click="copy"
    />
  </div>
</template>

Сворачивание блока

Шеврон разворачивает и сворачивает секцию: иконка меняется вместе с состоянием, aria-expanded сообщает его скринридеру.

Sandbox Storybook

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

const expanded = ref(true);
</script>

<template>
  <div class="m-auto flex w-[360px] flex-col gap-2">
    <div class="flex items-center gap-2">
      <span class="font-bold">Условия оплаты</span>

      <CdsFunctionalButton
        class="ml-auto"
        :icon="expanded ? 'chevron-up' : 'chevron-down'"
        :aria-expanded="expanded"
        :aria-label="expanded ? 'Свернуть условия оплаты' : 'Развернуть условия оплаты'"
        @click="expanded = !expanded"
      />
    </div>

    <p v-if="expanded" class="text-content-secondary">
      Оплата в течение 15 рабочих дней после подписания акта. Аванс — 30% от суммы договора.
    </p>
  </div>
</template>

API

Пропсы

Имя	Тип	По умолчанию	Описание
activeColor	string | undefined	—	Цвет компонента, когда он находится в активном состоянии
baseColor	string | undefined	—	Цвет неактивного компонента
color	string | undefined	—	Цвет компонента
disabled	boolean | null | undefined	null	Заблокированное состояние
exact	boolean | undefined	—	Если true, активное состояние будет применяться только при точном совпадении маршрута
href	string | undefined	—	Атрибут href для ссылки. Если указан, компонент будет вести себя как обычная ссылка
icon	IconValue | undefined	—	Иконка
loading	string | boolean | undefined	—	Индикатор загрузки для компонента
readonly	boolean | null | undefined	null	Только для чтения
replace	boolean | undefined	—	Если true, навигация по маршруту будет заменять текущую запись в истории вместо добавления новой
tag	string | JSXComponent<any> | undefined	'button'	Пользовательский HTML-тег для отображения
theme	string | undefined	—	Тема компонента
to	LinkTo | undefined	—	Маршрут назначения или объект для RouterLink. Если указан, компонент будет вести себя как RouterLink

Слоты

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