9.7k

Badge

PreviousNext

Displays a badge or a component that looks like a badge.

Default Primary Secondary Alert
Draft Review Team 12 new 
<script setup lang="ts">
import VBadge from '@ui-kit/src/components/Base/VBadge/VBadge.vue'
</script>

<template>
  <div class="flex flex-col items-start gap-3">
    <div class="flex flex-wrap gap-2">
      <VBadge>Default</VBadge>
      <VBadge color="primary">
        Primary
      </VBadge>
      <VBadge color="secondary">
        Secondary
      </VBadge>
      <VBadge color="red">
        Alert
      </VBadge>
    </div>

    <div class="flex flex-wrap gap-2 items-center">
      <VBadge color="yellow-light">
        Draft
      </VBadge>
      <VBadge color="purple-light">
        Review
      </VBadge>
      <VBadge color="secondary-light">
        Team
      </VBadge>
      <VBadge size="small" color="primary">
        12 new
      </VBadge>
    </div>
  </div>
</template>

Installation

pnpm dlx shadcn-vue@latest add badge

Usage

<script setup lang="ts">
import { Badge } from '@/components/ui/badge'
</script>

<template>
  <Badge variant="default | outline | secondary | destructive">
    Badge
  </Badge>
</template>

Link

You can use the as-child prop to make another component look like a badge. Here's an example of a link that looks like a badge.

<script setup lang="ts">
import { Badge } from '@/components/ui/badge'
</script>

<template>
  <Badge as-child>
    <a href="#">Badge</a>
  </Badge>
</template>
AvatarBreadcrumb