Tabs

Tab navigation for switching between content sections.

Open in Storybook

Interactive Demo

Active: overview

Usage

<script setup>
import { ref } from 'vue';
import { TabGroup } from '@yellowcard/b2b-design-system';

const activeTab = ref('overview');
const tabs = [
  { key: 'overview', label: 'Overview' },
  { key: 'transactions', label: 'Transactions' },
  { key: 'settings', label: 'Settings' },
];
</script>

<template>
  <TabGroup v-model="activeTab" :tabs="tabs" />
</template>

API Reference

Props

Prop	Type	Default	Description
modelValue	string	—	Active tab key (v-model)
tabs*	Tab[]	—	Array of tab objects with key and label
size	string	—	Tab size
type	string	—	Tab style type
radius	string	—	Border radius
fullWidth	boolean	false	Stretch tabs to full width
ariaLabel	string	—	Accessible label for tablist

Events

Event	Payload	Description
update:modelValue	string	Active tab changed

Accessibility

• Uses role="tablist" with role="tab" for each item
• Arrow keys navigate between tabs
• aria-selected reflects active state