For a sequential process with steps and progress, use CdsSteps; to pick a single value in a form, use CdsButtonToggle.

Anatomy

Tabs consist of a bar and a content area: with tabs from items the content area is rendered automatically, with manual markup CdsTabsView is composed next to the bar. The bar is a container with tab buttons; the selected tab is highlighted by a moving slider.

Storybook

Variations

Tabs and content

Sections are declared with CdsTab components in the default slot, and the content with CdsTabsViewItem components inside CdsTabsView. The value props bind a tab to its content, and a shared v-model keeps the bar and the content area in sync.

Sandbox Storybook

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

const tab = ref('overview');
</script>

<template>
  <div class="m-auto max-w-[470px]">
    <CdsTabs v-model="tab">
      <CdsTab value="overview">Обзор</CdsTab>
      <CdsTab value="docs">Документы</CdsTab>
      <CdsTab value="history">История</CdsTab>
    </CdsTabs>

    <CdsTabsView v-model="tab" class="mt-2">
      <CdsTabsViewItem value="overview"> Сводка по проекту: статус, ответственные и ближайшие сроки. </CdsTabsViewItem>
      <CdsTabsViewItem value="docs"> Договоры, акты и счета — всего 8 документов. </CdsTabsViewItem>
      <CdsTabsViewItem value="history"> Хронология изменений за последние 30 дней. </CdsTabsViewItem>
    </CdsTabsView>
  </div>
</template>

Tabs from an array

Pass an array of strings or { text, value } objects into items — the tabs and the content area are rendered automatically. The content of a section comes from the item.{value} slots, the label of a tab from the tab.{value} slots.

Sandbox Storybook

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

const tab = ref('requests');
const items = [
  { text: 'Заявки', value: 'requests' },
  { text: 'Договоры', value: 'contracts' },
  { text: 'Акты', value: 'acts' }
];
</script>

<template>
  <div class="m-auto max-w-[470px]">
    <CdsTabs v-model="tab" :items="items">
      <template #[`item.requests`]>
        <p class="py-2">Открытые заявки за последний месяц.</p>
      </template>
      <template #[`item.contracts`]>
        <p class="py-2">Действующие договоры с контрагентами.</p>
      </template>
      <template #[`item.acts`]>
        <p class="py-2">Акты, ожидающие подписания.</p>
      </template>
    </CdsTabs>
  </div>
</template>

Alignment

The align prop pushes the tabs to the start of the bar (the default), to the center or to the end.

Sandbox Storybook

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

const align = ref<'start' | 'center' | 'end'>('start');
</script>

<template>
  <div class="flex flex-col items-center gap-2">
    <CdsRadioGroup v-model="align" label="Позиционирование (align)" direction="horizontal">
      <CdsRadio label="start" value="start" />
      <CdsRadio label="center" value="center" />
      <CdsRadio label="end" value="end" />
    </CdsRadioGroup>

    <CdsTabs :align="align" class="w-full">
      <CdsTab>Москва</CdsTab>
      <CdsTab>Лиссабон</CdsTab>
      <CdsTab>Нью-Йорк</CdsTab>
    </CdsTabs>
  </div>
</template>

Layout

The grow prop stretches the tabs across the whole width of the bar — every tab takes an equal share of the free space.

Sandbox Storybook

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

<template>
  <CdsTabs grow>
    <CdsTab>Актуальные</CdsTab>
    <CdsTab>Последние</CdsTab>
    <CdsTab>Архивные</CdsTab>
  </CdsTabs>
</template>

The fixed-tabs prop also equalizes the width of the tabs, but caps it at 300px and centers the group.

Sandbox Storybook

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

<template>
  <CdsTabs fixed-tabs>
    <CdsTab>Все</CdsTab>
    <CdsTab>Входящие</CdsTab>
    <CdsTab>Отправленные</CdsTab>
    <CdsTab>Удаленные</CdsTab>
  </CdsTabs>
</template>

The direction="vertical" prop turns the bar into a column — handy for settings and sections with a long list. The content area is placed next to it with a regular flex row.

Sandbox Storybook

<script setup lang="ts">
import { CdsCard, CdsCardText, CdsTab, CdsTabs, CdsTabsView, CdsTabsViewItem } from '@central-design-system/components';
import { ref } from 'vue';

const tab = ref('company');
</script>

<template>
  <CdsCard class="m-auto max-w-[560px]">
    <div class="flex">
      <CdsTabs v-model="tab" direction="vertical">
        <CdsTab value="company" prepend-icon="company">Компания</CdsTab>
        <CdsTab value="employees" prepend-icon="user-group">Сотрудники</CdsTab>
        <CdsTab value="requisites" prepend-icon="credit-card">Реквизиты</CdsTab>
      </CdsTabs>

      <CdsTabsView v-model="tab">
        <CdsTabsViewItem value="company">
          <CdsCardText> Название, сфера деятельности и контакты — эти данные видят поставщики в каталоге. </CdsCardText>
        </CdsTabsViewItem>

        <CdsTabsViewItem value="employees">
          <CdsCardText> В организации 14 сотрудников. Пригласите коллег и настройте им права доступа. </CdsCardText>
        </CdsTabsViewItem>

        <CdsTabsViewItem value="requisites">
          <CdsCardText> ИНН, КПП и расчётный счёт подставляются в документы автоматически. </CdsCardText>
        </CdsTabsViewItem>
      </CdsTabsView>
    </div>
  </CdsCard>
</template>

Icons

A tab accepts the same content props as a button: prepend-icon and append-icon add an icon next to the text, icon leaves only the icon. For an icon tab do not forget aria-label — without text it stays the only name of the section.

Sandbox Storybook

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

<template>
  <div class="flex flex-col items-center gap-2">
    <CdsTabs>
      <CdsTab prepend-icon="file">Документы</CdsTab>
      <CdsTab prepend-icon="message">Обсуждение</CdsTab>
      <CdsTab prepend-icon="settings">Настройки</CdsTab>
    </CdsTabs>

    <CdsTabs>
      <CdsTab icon="list-bullet" aria-label="Списком" />
      <CdsTab icon="view-rows" aria-label="Карточками" />
    </CdsTabs>
  </div>
</template>

The stacked prop puts the icon above the text — the tab becomes taller and more noticeable. Such a layout works well with align="center" in mobile scenarios.

Sandbox Storybook

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

const tab = ref('recent');
</script>

<template>
  <div class="m-auto max-w-[470px]">
    <CdsTabs v-model="tab" stacked align="center">
      <CdsTab value="recent" prepend-icon="time">Недавние</CdsTab>
      <CdsTab value="favorites" prepend-icon="star">Избранное</CdsTab>
      <CdsTab value="nearby" prepend-icon="location">Рядом</CdsTab>
    </CdsTabs>

    <CdsTabsView v-model="tab" class="mt-2">
      <CdsTabsViewItem value="recent"> Поставщики, с которыми вы работали за последний месяц. </CdsTabsViewItem>
      <CdsTabsViewItem value="favorites"> Компании, которые вы добавили в избранное. </CdsTabsViewItem>
      <CdsTabsViewItem value="nearby"> Поставщики в вашем регионе с доставкой за один день. </CdsTabsViewItem>
    </CdsTabsView>
  </div>
</template>

States

The disabled prop turns a tab off, loading shows a loading indicator instead of the content.

Sandbox Storybook

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

<template>
  <div class="flex justify-center">
    <CdsTabs>
      <CdsTab>Активные</CdsTab>
      <CdsTab disabled>Черновики</CdsTab>
      <CdsTab loading>Архив</CdsTab>
    </CdsTabs>
  </div>
</template>

Colors

Tabs accept the color aliases of the palette (neutral, red, green, cyan, purple…) or any CSS color. The color prop paints the text of the tabs, active-color the slider of the selected tab, bg-color the background of the whole bar, and base-color the background of the unselected tabs.

Sandbox Storybook

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

<template>
  <div class="flex flex-col items-center gap-2">
    <CdsTabs color="purple" active-color="purple">
      <CdsTab>Обзор</CdsTab>
      <CdsTab>Аналитика</CdsTab>
      <CdsTab>Отчёты</CdsTab>
    </CdsTabs>

    <CdsTabs bg-color="cyan">
      <CdsTab>Обзор</CdsTab>
      <CdsTab>Аналитика</CdsTab>
      <CdsTab>Отчёты</CdsTab>
    </CdsTabs>
  </div>
</template>

Scrolling

When the tabs do not fit into the bar, it scrolls. The show-arrows prop adds scroll arrows, center-active keeps the selected tab in the center of the bar.

Sandbox Storybook

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

<template>
  <CdsTabs center-active show-arrows>
    <CdsTab v-for="i of 20" :key="i">Раздел {{ i }}</CdsTab>
  </CdsTabs>
</template>

Slider

The slider-transition prop picks the animation of the slider under the selected tab: shift (the default) moves it to the new tab, grow grows it in place, fade fades it in. The duration is set through slider-transition-duration, and hide-slider removes the slider entirely.

Sandbox Storybook

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

const transition = ref<'shift' | 'grow' | 'fade'>('shift');
</script>

<template>
  <div class="flex flex-col items-center gap-2">
    <CdsRadioGroup v-model="transition" label="Анимация (slider-transition)" direction="horizontal">
      <CdsRadio label="shift" value="shift" />
      <CdsRadio label="grow" value="grow" />
      <CdsRadio label="fade" value="fade" />
    </CdsRadioGroup>

    <CdsTabs :slider-transition="transition">
      <CdsTab>Обзор</CdsTab>
      <CdsTab>Аналитика</CdsTab>
      <CdsTab>Отчёты</CdsTab>
    </CdsTabs>
  </div>
</template>

Slots

Slots replace the automatic rendering from items when you need your own markup:

Slot	Description
default	Your own CdsTab when items is not set
tab, tab.{value}	Tab for an items element: shared and for a specific value
item, item.{value}	Section content: shared and for a specific value
view	Extra content inside CdsTabsView
prev, next	Your own scroll arrows

The tab and item slots receive the array element and replace the whole component — return CdsTab and CdsTabsViewItem with your own value from them. The tab.{value} and item.{value} slots replace the content only.

Sandbox Storybook

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

const tab = ref('profile');
const items = [
  { text: 'Профиль', value: 'profile', icon: 'user' },
  { text: 'Уведомления', value: 'notifications', icon: 'notification' },
  { text: 'Безопасность', value: 'security', icon: 'lock' }
];
</script>

<template>
  <div class="m-auto max-w-[420px]">
    <CdsTabs v-model="tab" :items="items">
      <template #tab="{ item }">
        <CdsTab :value="item.value" :prepend-icon="item.icon">{{ item.text }}</CdsTab>
      </template>

      <template #item="{ item }">
        <CdsTabsViewItem :value="item.value">
          <p class="py-2">Раздел «{{ item.text }}»</p>
        </CdsTabsViewItem>
      </template>
    </CdsTabs>
  </div>
</template>

Guidelines

Storybook

Scenarios

Card sections

Classic tabs: a product card with sections and a shared v-model. The review counter is a CdsBadge with the inline prop right inside the tab slot.

Sandbox Storybook

<script setup lang="ts">
import {
  CdsBadge,
  CdsCard,
  CdsCardText,
  CdsTab,
  CdsTabs,
  CdsTabsView,
  CdsTabsViewItem
} from '@central-design-system/components';
import { ref } from 'vue';

const tab = ref('description');
</script>

<template>
  <CdsCard class="m-auto max-w-[560px]">
    <CdsTabs v-model="tab">
      <CdsTab value="description">Описание</CdsTab>
      <CdsTab value="specs">Характеристики</CdsTab>
      <CdsTab value="reviews">
        Отзывы

        <template #append>
          <CdsBadge content="12" inline />
        </template>
      </CdsTab>
    </CdsTabs>

    <CdsCardText>
      <CdsTabsView v-model="tab">
        <CdsTabsViewItem value="description">
          Офисное кресло с регулируемой спинкой и поясничной поддержкой. Подходит для работы за компьютером дольше
          восьми часов в день.
        </CdsTabsViewItem>

        <CdsTabsViewItem value="specs">
          <dl class="grid grid-cols-2 gap-x-2 gap-y-1">
            <dt class="text-content-secondary">Максимальная нагрузка</dt>
            <dd>120 кг</dd>
            <dt class="text-content-secondary">Материал обивки</dt>
            <dd>Сетка, ткань</dd>
            <dt class="text-content-secondary">Гарантия</dt>
            <dd>3 года</dd>
          </dl>
        </CdsTabsViewItem>

        <CdsTabsViewItem value="reviews">
          «Собирается за десять минут, спинка держит отлично» — и ещё 11 отзывов со средней оценкой 4,8.
        </CdsTabsViewItem>
      </CdsTabsView>
    </CdsCardText>
  </CdsCard>
</template>

List filter

Tabs work without a content area too: v-model holds the selected status and the list is filtered by it through a computed. There is a single content area — only the selection changes.

Sandbox Storybook

<script setup lang="ts">
import { CdsList, CdsListItem, CdsTab, CdsTabs, CdsTag } from '@central-design-system/components';
import { computed, ref } from 'vue';

const status = ref('all');

const orders = [
  { id: 1, title: 'Поставка канцелярии', company: 'ООО «Ромашка»', status: 'active', label: 'В работе' },
  { id: 2, title: 'Ремонт офиса', company: 'ООО «Василёк»', status: 'done', label: 'Завершён' },
  { id: 3, title: 'Закупка ноутбуков', company: 'АО «Полюс»', status: 'active', label: 'В работе' },
  { id: 4, title: 'Клининг склада', company: 'ООО «Чисто»', status: 'done', label: 'Завершён' }
];

const filtered = computed(() =>
  status.value === 'all' ? orders : orders.filter((order) => order.status === status.value)
);
</script>

<template>
  <div class="m-auto flex w-[420px] flex-col gap-2">
    <CdsTabs v-model="status">
      <CdsTab value="all">Все</CdsTab>
      <CdsTab value="active">В работе</CdsTab>
      <CdsTab value="done">Завершённые</CdsTab>
    </CdsTabs>

    <CdsList lines="two">
      <CdsListItem
        v-for="order of filtered"
        :key="order.id"
        :value="order.id"
        :title="order.title"
        :subtitle="order.company"
      >
        <template #append>
          <CdsTag size="sm" :text="order.label" />
        </template>
      </CdsListItem>
    </CdsList>
  </div>
</template>

Lazy loading of sections

A heavy section loads on the first open: a watch on v-model fires the request, CdsSkeletonLoader stands in for the content while it loads, and the already loaded sections open instantly.

Sandbox Storybook

<script setup lang="ts">
import { CdsSkeletonLoader, CdsTab, CdsTabs, CdsTabsView, CdsTabsViewItem } from '@central-design-system/components';
import { ref, watch } from 'vue';

const tab = ref('summary');
const loaded = ref(['summary']);
const loading = ref(false);

watch(tab, async (value) => {
  if (loaded.value.includes(value as string)) return;

  loading.value = true;
  await new Promise((resolve) => setTimeout(resolve, 900));
  loaded.value = [...loaded.value, value as string];
  loading.value = false;
});
</script>

<template>
  <div class="m-auto max-w-[560px]">
    <CdsTabs v-model="tab">
      <CdsTab value="summary">Сводка</CdsTab>
      <CdsTab value="analytics">Аналитика</CdsTab>
      <CdsTab value="reports">Отчёты</CdsTab>
    </CdsTabs>

    <div class="pt-2">
      <CdsSkeletonLoader v-if="loading" type="article" />

      <CdsTabsView v-else v-model="tab">
        <CdsTabsViewItem value="summary"> Выручка за квартал выросла на 12%, средний чек — на 4%. </CdsTabsViewItem>
        <CdsTabsViewItem value="analytics"> Данные аналитики загрузились и закешировались. </CdsTabsViewItem>
        <CdsTabsViewItem value="reports"> Отчёты сформированы и готовы к выгрузке. </CdsTabsViewItem>
      </CdsTabsView>
    </div>
  </div>
</template>

Sections in a "More" menu

When there are more sections than fit into the bar, the rare ones hide into a CdsMenu whose activator is a regular "More" tab in the same bar. A click on "More" immediately shows the first section from the menu, the selected item takes the place of the first visible tab (the displaced one moves into the menu), and if the menu is closed without a choice, the bar and the content return to the current section.

Sandbox Storybook

<script setup lang="ts">
import {
  CdsList,
  CdsListItem,
  CdsMenu,
  CdsTab,
  CdsTabs,
  CdsTabsView,
  CdsTabsViewItem
} from '@central-design-system/components';
import { computed, nextTick, ref, watch } from 'vue';

const tab = ref('Сводка');
const visible = ref(['Сводка', 'Продажи', 'Закупки']);
const more = ref(['Логистика', 'Финансы', 'Персонал']);

const menu = ref(false);
let lastSection = tab.value;

const section = computed(() => (visible.value.includes(tab.value) ? tab.value : more.value[0]));

watch(tab, (value) => {
  if (visible.value.includes(value)) lastSection = value;
});

watch(menu, (open) => {
  if (!open && !visible.value.includes(tab.value)) tab.value = lastSection;
});

async function select(item: string) {
  const replaced = visible.value.shift();
  visible.value.push(item);
  more.value = more.value.filter((section) => section !== item);
  if (replaced) more.value.push(replaced);

  await nextTick();
  tab.value = item;
}
</script>

<template>
  <div class="m-auto max-w-[560px]">
    <CdsTabs v-model="tab">
      <CdsTab v-for="item in visible" :key="item" :value="item">{{ item }}</CdsTab>

      <CdsMenu v-if="more.length" v-model="menu">
        <template #activator="{ props }">
          <CdsTab append-icon="chevron-down" v-bind="props">Ещё</CdsTab>
        </template>

        <CdsList>
          <CdsListItem v-for="item in more" :key="item" :title="item" @click="select(item)" />
        </CdsList>
      </CdsMenu>
    </CdsTabs>

    <CdsTabsView :model-value="section" class="mt-2">
      <CdsTabsViewItem v-for="item in [...visible, ...more]" :key="item" :value="item">
        Показатели раздела «{{ item }}» за текущий квартал.
      </CdsTabsViewItem>
    </CdsTabsView>
  </div>
</template>

API

CdsTabs

Props

Name	Type	Default	Description
activeColor	string | undefined	—	Color of the component in its active state
align	"title" | "start" | "end" | "center" | undefined	'start'	Alignment of the tabs inside the bar
baseColor	string | undefined	—	Color of the component in its inactive state
bgColor	string | undefined	—	Background color of the component
centerActive	boolean | undefined	—	Forces the active component to be aligned to the center.
color	string | undefined	—	Component color
contentClass	any	—	Adds classes to the slide group container
contentStyle	any	—	Adds inline styles to the slide group container
direction	"horizontal" | "vertical" | undefined	'horizontal'	Switches the component between horizontal and vertical layout.
disabled	boolean | null | undefined	null	Disabled state
fixedTabs	boolean | undefined	—	Makes all tabs the same width regardless of the length of their labels
grow	boolean | undefined	—	Stretches the tabs across the whole available width of the container
height	string | number | undefined	—	Height of the tab bar. A number is in pixels, a string takes any CSS unit
hideSlider	boolean | undefined	—	Hides the underline indicator of the active tab
inset	boolean | undefined	—	Styling with a background: the active tab is highlighted with a filled pill instead of an underline
insetPadding	string | number | undefined	—	Padding of the background in inset mode. A number is in pixels, a string takes any CSS unit
insetRadius	string | number | undefined	—	Corner radius of the background in inset mode. A number is in pixels, a string takes any CSS unit
items	readonly TabItem[] | undefined	[]	List of tabs. A string or a number is a label, an object is a tab with arbitrary CdsTab props
mandatory	boolean | "force" | undefined	'force'	Requires at least one item to stay selected
max	number | undefined	—	Maximum number of items that can be selected
mobile	boolean | null | undefined	null	Determines the display mode of the component: true renders it in mobile mode, false in desktop mode, null makes the mode depend on the current breakpoint.
mobileBreakpoint	number | "xs" | "sm" | "md" | "lg" | "xl" | undefined	—	Sets the breakpoint at which the component switches to mobile mode. Accepts a number (for example, 600) or the name of a predefined breakpoint (xs, sm, md, lg, xl).
modelValue	any	—	Value of the selected items of the group
multiple	boolean | undefined	—	Allows selecting several items at once
nextIcon	IconValue | undefined	'chevron-right'	Icon for the “next” button.
prevIcon	IconValue | undefined	'chevron-left'	Icon for the “previous” button.
required	boolean | "force" | undefined	'force'	Requires at least one item to stay selected
scrollToActive	boolean | undefined	true	When true, the container scrolls the active component into view whenever it changes.
selectedClass	string | undefined	'cds-tabs--selected'	CSS class applied in the selected state
showArrows	string | boolean | undefined	—	Changes how the arrows are shown. By default the arrows appear on desktop devices when the container overflows and stay hidden on mobile devices. true also shows them on mobile on overflow, desktop always shows them on desktop, mobile always on mobile, always on both, and never disables the arrows.
sliderTransition	"shift" | "grow" | "fade" | undefined	—	Animation of the underline indicator of the active tab
sliderTransitionDuration	string | number | undefined	—	Duration of the indicator animation in milliseconds. 0 disables the flight; by default it follows the motion scale
spaced	"both" | "start" | "end" | undefined	—	Pushes the prepend and append slots apart to the edges of the button.
stacked	boolean | undefined	—	Lays out the icon and the label of the tab vertically — the icon above the text
tag	string | JSXComponent<any> | undefined	'div'	Custom HTML tag or component to render
textColor	string | undefined	—	Text color of the component

Events

Name	Type	Description
update:modelValue	[value: unknown]	Fires when the tab is switched. Passes the value of the new active tab

Slots

Name	Type	Description
default	any	Tabs and content when they are declared by hand instead of the items prop
item	CdsTabsSlot<any>	Template for the tab content. The slot props carry the element from items
next	any	Button that scrolls the tab bar forward
prev	any	Button that scrolls the tab bar backward
tab	CdsTabsSlot<any>	Template for the tab label. The slot props carry the element from items
view	any	The whole tab content area — replaces the automatic CdsTabsView

CdsTab

Props

Name	Type	Default	Description
activeColor	string | undefined	—	Color of the component in its active state
appearancedeprecated	"inverse" | "primary" | "secondary" | "tertiary" | "transparent" | undefined	—	Visual appearance of the component. Deprecated: use variant and color
appendIcon	IconValue | undefined	—	Icon in the append slot, after the content
baseColor	string | undefined	—	Color of the component in its inactive state
block	boolean | undefined	—	Stretches the button to the full width of its container
color	(string & {}) | "neutral" | "brand" | "accent" | "danger" | "inverse" | undefined	'brand'	Component color: a role, a palette alias, a theme token or a CSS color
content	string | number | undefined	—	Content displayed in the component.
direction	"horizontal" | "vertical" | undefined	'horizontal'	Switches the component between horizontal and vertical layout.
disabled	boolean | null | undefined	null	Disabled state
exact	boolean | undefined	—	If true, the active state applies only on an exact route match
fixed	boolean | undefined	—	Fixes the width of the tab so it does not stretch to the length of its label
height	string | number | undefined	—	Component height
hideSlider	boolean | undefined	—	Hides the underline indicator of the active tab
href	string | undefined	—	The href attribute of the link. When set, the component behaves as a regular link
icon	boolean | IconValue | undefined	—	Icon to display; the component renders as an icon-only button
loading	string | boolean | undefined	—	Loading indicator for the component
maxHeight	string | number | undefined	—	Maximum component height
maxWidth	string | number | undefined	—	Maximum component width
minHeight	string | number | undefined	—	Minimum component height
minWidth	string | number | undefined	—	Minimum component width
prependIcon	IconValue | undefined	—	Icon in the prepend slot, before the content
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
selectedClass	string | undefined	'cds-tab--selected'	CSS class applied in the selected state
size	number | "xs" | "sm" | "md" | "lg" | "xl" | undefined	'md'	Size of the component
sliderTransition	"shift" | "grow" | "fade" | undefined	—	Animation of the underline indicator of the active tab
sliderTransitionDuration	string | number | undefined	—	Duration of the indicator animation in milliseconds. 0 disables the flight; by default it follows the motion scale
spaced	"both" | "start" | "end" | undefined	—	Pushes the prepend and append slots apart to the edges of the button.
stacked	boolean | undefined	—	Stacks the icon above the text instead of placing them side by side
tag	string | JSXComponent<any> | undefined	'button'	Custom HTML tag or component to render
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
value	any	—	Value of the component within the group
variant	"solid" | "soft" | "outline" | "surface" | "ghost" | undefined	'solid'	Component variant: solid, soft, outline, surface, ghost
width	string | number | undefined	—	Component width

Slots

Name	Type	Description
append	any	Content after the text
default	any	Content inside the button
loader	any	Loading indicator
prepend	any	Content before the text

CdsTabsView

Props

Name	Type	Default	Description
crossfade	boolean | undefined	—	Slides change with a smooth crossfade instead of a shift
direction	"horizontal" | "vertical" | undefined	'horizontal'	Switches the component between horizontal and vertical layout.
disabled	boolean | null | undefined	null	Disabled state
max	number | undefined	—	Maximum number of items that can be selected
modelValue	any	—	Value of the selected items of the group
multiple	boolean | undefined	—	Allows selecting several items at once
reverse	boolean | undefined	—	Inverts the direction of the transition animation between slides
selectedClass	string | undefined	—	CSS class applied in the selected state
tag	string | JSXComponent<any> | undefined	'div'	Custom HTML tag or component to render
theme	string | undefined	—	Component theme
transitionDuration	number | undefined	—	Duration of the transition animation between slides, in milliseconds
verticalArrows	boolean | "left" | "right" | undefined	—	Places the navigation arrows vertically: 'left' or 'right' — the side, true — the default side

Events

Name	Type	Description
update:modelValue	[value: any]	Fires when the shown content changes. Passes the value of the new active tab

Slots

Name	Type	Description
additional	{ group: GroupProvide; }	Extra content above the slides — indicator dots or your own navigation, for example
default	{ group: GroupProvide; }	Slides. The slot props carry the group state for controlling the active slide
next	{ props: ControlProps; }	Button that moves to the next slide. The slot props are ready to bind to your own button
prev	{ props: ControlProps; }	Button that moves to the previous slide. The slot props are ready to bind to your own button

CdsTabsViewItem

Props

Name	Type	Default	Description
disabled	boolean | null | undefined	null	Disabled state
eager	boolean | undefined	—	Renders the content of the component right away. Useful when you have content that is not in the DOM but has to be indexed for SEO.
reverseTransition	string | boolean | undefined	—	Transition used when the slide appears in the reverse direction. A transition component name, or false to turn the animation off
selectedClass	string | undefined	—	CSS class applied in the selected state
transition	string | boolean | undefined	—	Transition used when the slide appears in the forward direction. A transition component name, or false to turn the animation off
value	any	—	Value of the component within the group

Slots

Name	Type	Description
default	any	Content of the slide