10.1k

Badge

PreviousNext

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

Verified
8
99
20+ 
<script setup lang="ts">
import { BadgeCheckIcon } from 'lucide-vue-next'
import { Badge } from '@/components/ui/badge'
</script>

<template>
  <div class="flex flex-wrap items-center gap-2">
    <Badge color="primary">
      <BadgeCheckIcon />
      Verified
    </Badge>
    <Badge class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums">
      8
    </Badge>
    <Badge
      class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums"
      color="destructive"
    >
      99
    </Badge>
    <Badge
      class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums"
      variant="outline"
    >
      20+
    </Badge>
  </div>
</template>

Installation

pnpm dlx @frontic/ui add badge

Usage

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

<template>
  <Badge variant="default | subtle | outline" color="primary">
    Badge
  </Badge>
</template>

Variants

Each color supports three visual styles: default (solid), subtle (light background), and outline (border only).

Default
Primary
Secondary
Subtle
Primary
Secondary
Outline
Primary
Secondary
<script setup lang="ts">
import { Badge } from '@/components/ui/badge'
</script>

<template>
  <div class="flex flex-col gap-4">
    <div class="flex flex-wrap items-center gap-2">
      <span class="w-16 text-sm text-muted-foreground">Default</span>
      <Badge color="primary">Primary</Badge>
      <Badge color="secondary">Secondary</Badge>
    </div>
    <div class="flex flex-wrap items-center gap-2">
      <span class="w-16 text-sm text-muted-foreground">Subtle</span>
      <Badge variant="subtle" color="primary">Primary</Badge>
      <Badge variant="subtle" color="secondary">Secondary</Badge>
    </div>
    <div class="flex flex-wrap items-center gap-2">
      <span class="w-16 text-sm text-muted-foreground">Outline</span>
      <Badge variant="outline" color="primary">Primary</Badge>
      <Badge variant="outline" color="secondary">Secondary</Badge>
    </div>
  </div>
</template>

Colors

Primary

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

<template>
  <div class="flex flex-wrap items-center gap-2">
    <Badge color="primary">Default</Badge>
    <Badge variant="subtle" color="primary">Subtle</Badge>
    <Badge variant="outline" color="primary">Outline</Badge>
  </div>
</template>

Secondary

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

<template>
  <div class="flex flex-wrap items-center gap-2">
    <Badge color="secondary">Default</Badge>
    <Badge variant="subtle" color="secondary">Subtle</Badge>
    <Badge variant="outline" color="secondary">Outline</Badge>
  </div>
</template>

Positive

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

<template>
  <div class="flex flex-wrap items-center gap-2">
    <Badge color="positive">Default</Badge>
    <Badge variant="subtle" color="positive">Subtle</Badge>
    <Badge variant="outline" color="positive">Outline</Badge>
  </div>
</template>

Destructive

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

<template>
  <div class="flex flex-wrap items-center gap-2">
    <Badge color="destructive">Default</Badge>
    <Badge variant="subtle" color="destructive">Subtle</Badge>
    <Badge variant="outline" color="destructive">Outline</Badge>
  </div>
</template>

Promo

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

<template>
  <div class="flex flex-wrap items-center gap-2">
    <Badge color="promo">Default</Badge>
    <Badge variant="subtle" color="promo">Subtle</Badge>
    <Badge variant="outline" color="promo">Outline</Badge>
  </div>
</template>

Discount

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

<template>
  <div class="flex flex-wrap items-center gap-2">
    <Badge color="discount">Default</Badge>
    <Badge variant="subtle" color="discount">Subtle</Badge>
    <Badge variant="outline" color="discount">Outline</Badge>
  </div>
</template>

New

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

<template>
  <div class="flex flex-wrap items-center gap-2">
    <Badge color="new">Default</Badge>
    <Badge variant="subtle" color="new">Subtle</Badge>
    <Badge variant="outline" color="new">Outline</Badge>
  </div>
</template>

Price

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

<template>
  <div class="flex flex-wrap items-center gap-2">
    <Badge color="price">Default</Badge>
    <Badge variant="subtle" color="price">Subtle</Badge>
    <Badge variant="outline" color="price">Outline</Badge>
  </div>
</template>

Sizes

Badges come in three sizes: small, medium, and large.

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

<template>
  <div class="flex flex-wrap items-center gap-2">
    <Badge size="sm" color="primary">Small</Badge>
    <Badge size="md" color="primary">Medium</Badge>
    <Badge size="lg" color="primary">Large</Badge>
  </div>
</template>

Examples

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