Style the primary action of the screen — "Save", "Submit the request" — with CdsButton, and a navigation inside a paragraph with CdsLink. If the icon triggers nothing and only explains the content, leave it as CdsIcon.

Variations

Icon

The icon prop sets the icon — the usual look of a functional button. Such a button has no text, so add an aria-label: it stays the only name of the action.

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>

Content

The default slot replaces the icon with your own content — a short label for an action that an icon cannot explain, for example.

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>

States

The loading prop shows the progress of an operation instead of the icon, disabled dims the button and forbids pressing it, and readonly keeps the button looking regular but takes it out of the focus order and blocks the click.

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>

Button as a link

Pass href (or to with a RouteLocationRaw object from vue-router) — the button renders as an a tag with all the link attributes, keeping its look.

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>

Guidelines

Storybook

Scenarios

Actions in a row of a list

Download and delete are actions on a particular record, not on the screen. The buttons stand at the right edge of the row, and an aria-label with the name of the document tells the buttons of the neighboring rows apart.

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>

A button inside an input

In the append-inner and prepend-inner slots of the inputs a functional button fits the size of the field exactly. Here it toggles type between password and text, and the aria-label changes together with the icon.

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>

Copying a value

A button next to a value copies it into the clipboard: loading shows the short operation, and the check icon confirms the result and turns back into copy a couple of seconds later.

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>

Collapsing a block

A chevron expands and collapses a section: the icon changes together with the state, and aria-expanded reports it to the screen reader.

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

Props

Name	Type	Default	Description
activeColor	string | undefined	—	Color of the component in its active state
baseColor	string | undefined	—	Color of the component in its inactive state
color	string | undefined	—	Component color
disabled	boolean | null | undefined	null	Disabled state
exact	boolean | undefined	—	If true, the active state applies only on an exact route match
href	string | undefined	—	The href attribute of the link. When set, the component behaves as a regular link
icon	IconValue | undefined	—	Icon
loading	string | boolean | undefined	—	Loading indicator for the component
readonly	boolean | null | undefined	null	Read-only state
replace	boolean | undefined	—	If true, navigation replaces the current history entry instead of pushing a new one
tag	string | JSXComponent<any> | undefined	'button'	Custom HTML tag or component to render
theme	string | undefined	—	Component theme
to	LinkTo | undefined	—	Target route or route location object for RouterLink. When set, the component behaves as a RouterLink

Slots

Name	Type	Description
default	any	Content inside the button
loader	any	Loading indicator