The toolbar only lays the content out — the place in the layout is reserved by CdsHeader and CdsFooter. For navigating the subsections take CdsTabs; for an action bar over a record take CdsButtonGroup.

Anatomy

The toolbar lines the content up in a row and centers it vertically. The CdsToolbarTitle title takes all the free space, so the elements before it stick to the left edge and the ones after it stick to the right.

Storybook

Variations

Title

CdsToolbarTitle stretches and truncates long text with an ellipsis without breaking the line. The shrink prop turns the stretching off: the title shrinks to its content and stays next to the neighboring element — a handy way to put a status or a counter right after the name.

Sandbox Storybook

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

<template>
  <div class="flex flex-col gap-4">
    <CdsToolbar bordered>
      <CdsToolbarTitle>Заголовок растягивается и разводит группы по краям</CdsToolbarTitle>
      <CdsButton size="sm">Действие</CdsButton>
    </CdsToolbar>

    <CdsToolbar bordered>
      <CdsToolbarTitle shrink>Заголовок с shrink остаётся рядом с кнопкой</CdsToolbarTitle>
      <CdsButton size="sm">Действие</CdsButton>
    </CdsToolbar>

    <CdsToolbar bordered>
      <CdsToolbarTitle>Очень длинный заголовок раздела, который не помещается в одну строку тулбара</CdsToolbarTitle>
      <CdsButton size="sm">Действие</CdsButton>
    </CdsToolbar>
  </div>
</template>

Paddings

The no-gutters prop removes the inner paddings entirely — the toolbar aligns with the content of the page. The no-gutter prop removes the padding on one side: start or end. The inset prop does the opposite and adds a padding on the left — that is how a nested second-level toolbar is set off.

Sandbox Storybook

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

<template>
  <div class="m-auto flex w-full max-w-[560px] flex-col gap-4">
    <div class="flex flex-col gap-1">
      <span class="text-content-secondary">По умолчанию</span>
      <div class="rounded-200 border border-dashed border-line-primary">
        <CdsToolbar bordered>
          <CdsToolbarTitle>Заголовок раздела</CdsToolbarTitle>
          <CdsButton size="sm">Действие</CdsButton>
        </CdsToolbar>
      </div>
    </div>

    <div class="flex flex-col gap-1">
      <span class="text-content-secondary">no-gutters</span>
      <div class="rounded-200 border border-dashed border-line-primary">
        <CdsToolbar bordered no-gutters>
          <CdsToolbarTitle>Заголовок раздела</CdsToolbarTitle>
          <CdsButton size="sm">Действие</CdsButton>
        </CdsToolbar>
      </div>
    </div>

    <div class="flex flex-col gap-1">
      <span class="text-content-secondary">no-gutter="start"</span>
      <div class="rounded-200 border border-dashed border-line-primary">
        <CdsToolbar bordered no-gutter="start">
          <CdsToolbarTitle>Заголовок раздела</CdsToolbarTitle>
          <CdsButton size="sm">Действие</CdsButton>
        </CdsToolbar>
      </div>
    </div>

    <div class="flex flex-col gap-1">
      <span class="text-content-secondary">no-gutter="end"</span>
      <div class="rounded-200 border border-dashed border-line-primary">
        <CdsToolbar bordered no-gutter="end">
          <CdsToolbarTitle>Заголовок раздела</CdsToolbarTitle>
          <CdsButton size="sm">Действие</CdsButton>
        </CdsToolbar>
      </div>
    </div>

    <div class="flex flex-col gap-1">
      <span class="text-content-secondary">inset</span>
      <div class="rounded-200 border border-dashed border-line-primary">
        <CdsToolbar bordered inset>
          <CdsToolbarTitle>Заголовок раздела</CdsToolbarTitle>
          <CdsButton size="sm">Действие</CdsButton>
        </CdsToolbar>
      </div>
    </div>
  </div>
</template>

Separator and color

The bordered prop draws the bottom border — it separates the title of a section from its content. The bg-color and color props paint the background and the text. Inside CdsHeader and CdsFooter the toolbar does not draw its own background: the color comes from the part of the layout, so the bar does not cover it.

Sandbox Storybook

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

const bgColor = ref('default');
</script>

<template>
  <div class="flex flex-col gap-4">
    <CdsRadioGroup v-model="bgColor" direction="horizontal" hide-details>
      <CdsRadio value="default" label="Цвет темы" />
      <CdsRadio value="neutral" label="neutral" />
      <CdsRadio value="indigo" label="indigo" />
      <CdsRadio value="lemon" label="lemon" />
    </CdsRadioGroup>

    <CdsToolbar bordered :bg-color="bgColor === 'default' ? undefined : bgColor">
      <CdsToolbarTitle>Заголовок раздела</CdsToolbarTitle>
      <CdsButton variant="soft" color="neutral" size="sm">Действие</CdsButton>
    </CdsToolbar>
  </div>
</template>

Guidelines

Storybook

Scenarios

Section title on a page

The name, the status and the actions in a single row: shrink keeps the status next to the name, mr-auto pushes the buttons to the right edge, no-gutters aligns the toolbar with the content of the card, and bordered separates the header of the section from the text.

Sandbox Storybook

<script setup lang="ts">
import {
  CdsButton,
  CdsCard,
  CdsFunctionalButton,
  CdsStatus,
  CdsToolbar,
  CdsToolbarTitle
} from '@central-design-system/components';
</script>

<template>
  <CdsCard class="m-auto w-full max-w-[640px] p-4">
    <CdsToolbar no-gutters bordered class="mb-4 gap-2">
      <CdsToolbarTitle shrink class="text-xl font-bold">Закупка №2401</CdsToolbarTitle>
      <CdsStatus status="success" text="Активна" variant="text" class="ml-2 mr-auto" />
      <CdsFunctionalButton icon="edit" aria-label="Редактировать" />
      <CdsButton size="sm" prepend-icon="download">Скачать</CdsButton>
    </CdsToolbar>

    <p class="text-content-secondary">Поставка серверного оборудования, приём заявок до 12 марта.</p>
  </CdsCard>
</template>

Application header and footer

In CdsHeader the toolbar holds the menu button, the title and the profile; in CdsFooter it holds the copyright. The background is set on the parts of the layout, and the toolbar inherits it together with the contrasting text color.

Sandbox Storybook

<script setup lang="ts">
import {
  CdsAvatar,
  CdsFooter,
  CdsFunctionalButton,
  CdsHeader,
  CdsLayout,
  CdsMain,
  CdsPage,
  CdsToolbar,
  CdsToolbarTitle
} from '@central-design-system/components';
</script>

<template>
  <div class="h-[280px]">
    <CdsLayout container>
      <CdsHeader bordered bg-color="indigo">
        <CdsToolbar>
          <CdsFunctionalButton icon="menu" class="mr-2" aria-label="Открыть навигацию" />
          <CdsToolbarTitle>Портал закупок</CdsToolbarTitle>
          <CdsAvatar icon="user" />
        </CdsToolbar>
      </CdsHeader>

      <CdsMain>
        <CdsPage padding>
          <div class="rounded-200 bg-surface-secondary p-4 text-content-primary">Содержимое страницы</div>
        </CdsPage>
      </CdsMain>

      <CdsFooter bordered>
        <CdsToolbar>
          <CdsToolbarTitle>© 2026 Портал закупок</CdsToolbarTitle>
        </CdsToolbar>
      </CdsFooter>
    </CdsLayout>
  </div>
</template>

API

CdsToolbar

Props

Name	Type	Default	Description
bgColor	string | undefined	—	Background color of the component
bordered	boolean | undefined	false	Shows the bottom border.
color	string | undefined	—	Component color
inset	boolean | undefined	false	Nested toolbar (indented from the left).
noGutter	"start" | "end" | undefined	—	Removes the padding on one side: start or end.
noGutters	boolean | undefined	false	Removes all inner paddings.
theme	string | undefined	—	Component theme

Slots

Name	Type	Description
default	any	Content of the toolbar.

CdsToolbarTitle

Props

Name	Type	Default	Description
shrink	boolean | undefined	false	Shrinks the title to its content instead of stretching it.

Slots

Name	Type	Description
default	any	Text of the title.