If the user does not trigger an action but picks one of several options, use CdsButtonToggle — it keeps the selected state.

Variations

The group passes the variant, color, base-color and size props down to every button inside — you do not need to repeat them on each button. A prop set on the button itself takes precedence over the group value.

Variant and color

variant and color set the look of every button in the group — from a filled solid for the main set of actions to color="inverse" for dark backgrounds. The deprecated appearance still works and resolves into the same pair as on CdsButton.

Sandbox Storybook

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

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

<template>
  <div class="flex flex-col items-center gap-4">
    <CdsButtonGroup
      v-for="look of looks"
      :key="look.variant + look.color"
      :variant="look.variant"
      :color="look.color"
      divided
    >
      <CdsButton text="Копировать" />
      <CdsButton text="Переместить" />
      <CdsButton text="Удалить" />
    </CdsButtonGroup>

    <div class="rounded-200 bg-surface-inverse p-4">
      <CdsButtonGroup variant="solid" color="inverse" divided>
        <CdsButton text="Копировать" />
        <CdsButton text="Переместить" />
        <CdsButton text="Удалить" />
      </CdsButtonGroup>
    </div>
  </div>
</template>

Sizes

size changes the height and padding of all buttons at once, so a group in a filter bar and a group in a table header stay consistent.

Sandbox Storybook

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

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

<template>
  <div class="flex flex-col items-center gap-4">
    <CdsButtonGroup v-for="size of sizes" :key="size" :size="size" variant="soft" color="brand" divided>
      <CdsButton :text="'Назад ' + size" prepend-icon="arrow-left" />
      <CdsButton :text="'Вперёд ' + size" append-icon="arrow-right" />
    </CdsButtonGroup>
  </div>
</template>

Color

color paints the button background with a palette alias. Use status colors when the whole group leads to one outcome — accept or reject.

Sandbox Storybook

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

<template>
  <div class="flex flex-wrap items-center justify-center gap-4">
    <CdsButtonGroup color="status-success-fill" divided>
      <CdsButton text="Принять" prepend-icon="check" />
      <CdsButton text="Принять все" />
    </CdsButtonGroup>

    <CdsButtonGroup color="status-danger-fill" divided>
      <CdsButton text="Отклонить" prepend-icon="remove" />
      <CdsButton text="Отклонить все" />
    </CdsButtonGroup>
  </div>
</template>

Dividers and direction

Without divided the buttons sit flush against each other; with it a line appears between them, so neighboring actions do not blend together. direction="vertical" turns the group into a column — for zoom controls on a map, for example.

Sandbox Storybook

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

<template>
  <div class="flex flex-wrap items-center justify-center gap-4">
    <CdsButtonGroup variant="soft" color="brand">
      <CdsButton text="Скачать" prepend-icon="download" />
      <CdsButton text="Печать" prepend-icon="print" />
    </CdsButtonGroup>

    <CdsButtonGroup variant="soft" color="neutral" divided>
      <CdsButton text="Копировать" prepend-icon="copy" />
      <CdsButton text="Переместить" prepend-icon="paste" />
      <CdsButton text="Удалить" prepend-icon="delete" />
    </CdsButtonGroup>

    <CdsButtonGroup variant="soft" color="brand" direction="vertical" divided>
      <CdsButton icon="add" aria-label="Приблизить" />
      <CdsButton icon="minus" aria-label="Отдалить" />
    </CdsButtonGroup>
  </div>
</template>

API

Props

Name	Type	Default	Description
appearancedeprecated	"inverse" | "primary" | "secondary" | "tertiary" | "transparent" | undefined	—	Visual appearance of the component. Deprecated: use variant and color
baseColor	string | undefined	—	Color of the component in its inactive state
color	(string & {}) | "neutral" | "brand" | "accent" | "danger" | "inverse" | undefined	'brand'	Component color: a role, a palette alias, a theme token or a CSS color
direction	"horizontal" | "vertical" | undefined	'horizontal'	Switches the component between horizontal and vertical layout.
divided	boolean | undefined	—	Adds dividers between the buttons of the group.
size	number | "xs" | "sm" | "md" | "lg" | "xl" | undefined	'md'	Size of the component
tag	string | JSXComponent<any> | undefined	'div'	Custom HTML tag or component to render
theme	string | undefined	—	Component theme
variant	"solid" | "soft" | "outline" | "surface" | "ghost" | undefined	'solid'	Component variant: solid, soft, outline, surface, ghost

Slots

Name	Type	Description
default	any	Buttons of the group.