If the element triggers an action instead of a navigation — saves, deletes, opens a modal — take CdsButton. A button also accepts href or to when a navigation has to look like a button. The path through the hierarchy of sections is built by CdsBreadcrumbs, and sections of equal weight are switched by CdsTabs.

Variations

Link text

The text prop sets the label as a string, the default slot as arbitrary markup — text with an icon, for example. The slot wins over the prop.

Sandbox Storybook

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

<template>
  <div class="flex flex-wrap items-center justify-center gap-4">
    <CdsLink href="#" text="Текст из пропа text" />

    <CdsLink href="#">Контент из слота default</CdsLink>

    <CdsLink href="#">
      <CdsIcon icon="file-download" :size="16" start />
      Скачать спецификацию
    </CdsLink>
  </div>
</template>

Address

The href prop renders a regular link. Attributes are written on the component just like on an a tag: target="_blank" opens the page in a new tab — mark such a link with an icon so that leaving the application does not come as a surprise. Visited links change color; anchors like #section stay as they are.

Sandbox Storybook

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

<template>
  <div class="flex flex-col items-center gap-3">
    <CdsLink href="https://www.b2b-center.ru" text="Открыть сайт b2b-center.ru" />

    <CdsLink href="https://www.b2b-center.ru" target="_blank" rel="noopener">
      Открыть в новой вкладке
      <CdsIcon icon="external-link" :size="16" end />
    </CdsLink>
  </div>
</template>

Application route

The to prop accepts a path or a vue-router route object: the navigation runs without a page reload, and on the active route the link gets aria-current="page". The replace prop replaces the current history entry instead of adding a new one — so going "back" skips the intermediate screen. The exact prop treats the route as active only on a full match, not by prefix.

<CdsLink to="/profile" text="Профиль" />
<CdsLink :to="{ name: 'order', params: { id } }" exact text="Заказ" />
<CdsLink to="/login" replace text="Войти" />

Disabled link

The disabled prop dims the color and removes the navigation: the component cancels the click, sets aria-disabled and takes the link out of the Tab order. Explain nearby why the navigation is unavailable — the gray state alone does not name the reason.

Sandbox Storybook

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

<template>
  <div class="flex flex-wrap items-center justify-center gap-4">
    <CdsLink href="https://www.b2b-center.ru" text="Доступная ссылка" />

    <CdsLink href="https://www.b2b-center.ru" disabled text="Недоступная ссылка" />
  </div>
</template>

Guidelines

Storybook

Scenarios

A link inside text

Inside a paragraph the link covers exactly the phrase that names the destination. A @click.prevent handler keeps the user on the page and reveals the details in place, while href="mailto:…" opens the mail client.

Sandbox Storybook

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

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

<template>
  <div class="m-auto w-[420px] max-w-full">
    <p class="m-0">
      Заявка уходит на проверку сразу после отправки. Порядок рассмотрения описан в
      <CdsLink href="#" text="регламенте закупок" @click.prevent="expanded = !expanded" />, а вопросы принимает
      <CdsLink href="mailto:support@example.com" text="служба поддержки" />.
    </p>

    <p v-if="expanded" class="mt-3 mb-0">
      Заявку проверяют три рабочих дня. Если данных не хватает, вы получите письмо с уточнениями и дополните заявку без
      повторной подачи.
    </p>
  </div>
</template>

Result list

The titles of the found documents are links: the user scans the list and opens the one they need. The text comes from the text prop, and the click handler shows the selected document without leaving the page.

Sandbox Storybook

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

const documents = [
  'Регламент закупок',
  'Договор поставки № 114',
  'Акт сверки за II квартал',
  'Спецификация оборудования',
  'Протокол разногласий'
];

const query = ref('');
const opened = ref<string | null>(null);

const results = computed(() =>
  documents.filter((title) => title.toLowerCase().includes(query.value.trim().toLowerCase()))
);
</script>

<template>
  <div class="m-auto flex w-[350px] max-w-full flex-col gap-2">
    <CdsTextInput v-model="query" label="Поиск по документам" placeholder="Введите название" clearable />

    <ul class="m-0 flex list-none flex-col gap-1 p-0">
      <li v-for="title in results" :key="title">
        <CdsLink href="#" :text="title" @click.prevent="opened = title" />
      </li>
      <li v-if="!results.length">Ничего не нашлось — измените запрос.</li>
    </ul>

    <p v-if="opened" class="m-0">Открыт документ «{{ opened }}».</p>
  </div>
</template>

Documents with restricted access

The list shows all the documents of a procedure, but some of them are closed: disabled keeps their titles visible and blocks the navigation. The request access button lifts the restriction — the links come alive without reloading the list.

Sandbox Storybook

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

const documents = [
  { title: 'Извещение о закупке', restricted: false },
  { title: 'Техническое задание', restricted: false },
  { title: 'Смета проекта', restricted: true },
  { title: 'Протокол комиссии', restricted: true }
];

const granted = ref(false);
const requesting = ref(false);

function requestAccess() {
  requesting.value = true;

  setTimeout(() => {
    requesting.value = false;
    granted.value = true;
  }, 1000);
}
</script>

<template>
  <div class="m-auto flex w-[350px] max-w-full flex-col gap-2">
    <ul class="m-0 flex list-none flex-col gap-1 p-0">
      <li v-for="document in documents" :key="document.title">
        <CdsLink href="#" :disabled="document.restricted && !granted" :text="document.title" @click.prevent />
      </li>
    </ul>

    <template v-if="!granted">
      <p class="m-0">Смета и протокол открыты только участникам процедуры.</p>

      <CdsButton variant="soft" color="brand" text="Запросить доступ" :loading="requesting" @click="requestAccess" />
    </template>
  </div>
</template>

API

Props

Name	Type	Default	Description
content	string | number | undefined	—	Content displayed in the component.
disabled	boolean | undefined	—	Disables the link: no navigation happens, aria-disabled and tabindex=-1 are set
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
replace	boolean | undefined	—	If true, navigation replaces the current history entry instead of pushing a new one
text	string | number | undefined	—	Text displayed in the component.
theme	string | undefined	—	Component theme
to	LinkTo | undefined	—	Target route or route location object for RouterLink. When set, the component behaves as a RouterLink

Events

Name	Type	Description
click	[e: MouseEvent]	Click on the link

Slots

Name	Type	Description
default	any	Link content. Takes precedence over the text prop.