Components

Tab badge

Show a count next to a tab label.

Import

import { TabBadge } from "@dr-max/ui/tab-badge"

The entry carries its own precompiled CSS — no extra style imports needed.

<script setup lang="ts">
import { TabBadge } from "@dr-max/ui/tab-badge"
</script>

<template>
  <TabBadge value="12" />
</template>

The value accepts a number or a short string:

399+New

<template>
  <TabBadge :value="3" />
  <TabBadge value="99+" />
  <TabBadge value="New" />
</template>

You rarely need to render the badge yourself — Tab shows it automatically when its counter prop is set:

<template>
  <TabGroup>
    <Tab name="Reviews" :counter="12"> … </Tab>
  </TabGroup>
</template>

value

<script setup lang="ts">
import { TabBadge } from '@dr-max/ui/tab-badge'
</script>

<template>
  <TabBadge value="12" />
</template>