Tabs

Tabs are used to organize content into different sections. They are commonly used in web applications to manage multiple views.

Basic Usage

Regular Tabs:

tab

tab

tab

<template>
  <mc-tabs :list="tabsBasic" />
</template>

<script lang="ts" setup>
import McTabs from '@/components/tabs/tabs.vue';

const tabsBasic = [{ label: 'tab' }, { label: 'tab' }, { label: 'tab' }];
</script>

Underlined Tabs:

title

title

title

<template>
  <mc-tabs :list="tabsUnderlined" :underlined="true" />
</template>

<script lang="ts" setup>
import McTabs from '@/components/tabs/tabs.vue';

const tabsUnderlined = [
  { label: 'title', disabled: false },
  { label: 'title', disabled: false },
  { label: 'title', disabled: false },
];
</script>

Disabled State

Regular Tabs:

tab

tab

tab

<template>
  <mc-tabs :list="tabsBasicWithDisabled" />
</template>

<script lang="ts" setup>
import McTabs from '@/components/tabs/tabs.vue';

const tabsBasicWithDisabled = ref([
  { label: 'tab', disabled: false },
  { label: 'tab', disabled: false },
  { label: 'tab', disabled: true },
]);
</script>

Underlined Tabs:

title

title

title

<template>
  <mc-tabs :list="tabsUnderlinedDisabled" :underlined="true" />
</template>

<script lang="ts" setup>
import McTabs from '@/components/tabs/tabs.vue';

const tabsUnderlinedDisabled = [
  { label: 'title', disabled: false },
  { label: 'title', disabled: false },
  { label: 'title', disabled: true },
];
</script>

Active State

By adding the active-tab attribute to the component, you can specify which tab should be set as active. This will highlight the tab and visually indicate that it is selected.

tab 1

tab 2

tab 3

<template>
  <mc-tabs :list="tabsRandomLabel" active-tab="tab 2" />
</template>

<script lang="ts" setup>
import McTabs from '@/components/tabs/tabs.vue';

const tabsRandomLabel = ref([{ label: 'tab 1' }, { label: 'tab 2' }, { label: 'tab 3' }]);
</script>

With Icon

Regular Tabs:

tab

tab

tab

<template>
  <mc-tabs :list="tabsWithIcon" />
</template>

<script lang="ts" setup>
import McTabs from '@/components/tabs/tabs.vue';

const tabsWithIcon = [
  { label: 'tab', icon: 'ph:plant-light', iconFill: 'ph:plant-fill' },
  { label: 'tab', icon: 'ph:leaf-light', iconFill: 'ph:leaf-fill' },
  { label: 'tab', icon: 'ph:tree-light', iconFill: 'ph:tree-fill' },
];
</script>

Underlined Tabs:

title

title

title

<template>
  <mc-tabs :list="tabsUnderlinedWithIcon" :underlined="true" />
</template>

<script lang="ts" setup>
import McTabs from '@/components/tabs/tabs.vue';

const tabsUnderlinedWithIcon = [
  { label: 'title', disabled: false, icon: 'ph:plant-light', iconFill: 'ph:plant-fill' },
  { label: 'title', disabled: false, icon: 'ph:leaf-light', iconFill: 'ph:leaf-fill' },
  { label: 'title', disabled: false, icon: 'ph:tree-light', iconFill: 'ph:tree-fill' },
];
</script>

Icon Only

Regular Tabs:

<template>
  <mc-tabs :list="tabsIconOnly" />
</template>

<script lang="ts" setup>
import McTabs from '@/components/tabs/tabs.vue';

const tabsIconOnly = [
  { icon: 'ph:plant-light', iconFill: 'ph:plant-fill' },
  { icon: 'ph:leaf-light', iconFill: 'ph:leaf-fill' },
  { icon: 'ph:tree-light', iconFill: 'ph:tree-fill' },
];
</script>

Underlined Tabs:

<template>
  <mc-tabs :list="tabsIconOnly" :underlined="true" />
</template>

<script lang="ts" setup>
import McTabs from '@/components/tabs/tabs.vue';

const tabsIconOnly = [
  { icon: 'ph:plant-light', iconFill: 'ph:plant-fill' },
  { icon: 'ph:leaf-light', iconFill: 'ph:leaf-fill' },
  { icon: 'ph:tree-light', iconFill: 'ph:tree-fill' },
];
</script>

Badge

Tabs can display badges on each tab item to show notifications, counters, or status indicators. Enable badges by setting the showBadge prop to true and adding a badge object to each tab item.

Tabs with Badges:

tab

5

tab

12

tab

2

<template>
  <mc-tabs :list="tabsWithBadges" :show-badge="true" />
</template>

<script lang="ts" setup>
import McTabs from '@/components/tabs/tabs.vue';
import { ref } from 'vue';

const tabsWithBadges = ref([
  { label: 'tab', badge: { text: '5', variant: 'brand', size: 'small' } },
  { label: 'tab', badge: { text: '12', variant: 'information', size: 'small' } },
  { label: 'tab', badge: { text: '2', variant: 'danger', size: 'small' } },
]);
</script>

Underlined Tabs with Badges:

title

3

title

8

title

2

<template>
  <mc-tabs :list="tabsUnderlinedWithBadges" :underlined="true" :show-badge="true" />
</template>

<script lang="ts" setup>
import McTabs from '@/components/tabs/tabs.vue';
import { ref } from 'vue';

const tabsUnderlinedWithBadges = ref([
  { label: 'title', badge: { text: '3', variant: 'brand', size: 'small' } },
  { label: 'title', badge: { text: '8', variant: 'information', size: 'small' } },
  { label: 'title', badge: { text: '2', variant: 'danger', size: 'small' } },
]);
</script>

API Reference

Props

Name	Description	Type	Default
list	Array of tab items to display. Each item should contain a label property (for text display), and can optionally include icon (icon to display), iconFill (icon to display when active), and disabled (whether the tab is disabled).	Array<{ label: string; icon?: string; iconFill?: string | Component; disabled?: boolean }>	[]
underlined	Determines the visual style of the tabs. When true, tabs will have an underline style with the active tab highlighted by an underline. When false, tabs will have a button-like appearance with borders.	boolean	false
activeTab	Sets which tab should be active by matching its label. If provided, the tab with the matching label will be activated on component mount. If not provided or no match is found, the first tab will be active by default.	string	''
showBadge	Controls whether badges are displayed on tabs. When true, badges defined in each tab item will be rendered. When false, badges are hidden even if defined in the tab items.	boolean	false

Events

Name	Description	Parameters
tabIndex	Emitted when a tab is selected. Returns the index of the selected tab.	(index: number)

List Item Properties

Name	Description	Type	Required
label	The text to display in the tab. This is also used to match against the activeTab prop.	string	Yes (unless using icon-only tabs)
icon	The icon to display in the tab. Uses Iconify for icon rendering.	string	No
iconFill	The icon to display when the tab is active. This allows for a different icon style when a tab is selected.	string | Component	No
disabled	Whether the tab is disabled. Disabled tabs cannot be selected and have a visual disabled state.	boolean	No
badge	Badge configuration object displayed on the tab. Requires the showBadge prop to be enabled. The badge object should contain text (badge content), variant (visual style), and size (badge size).	BadgePropTypes	No