8.9k

Badge

PreviousNext

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

Badge
Secondary
Destructive
Outline
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-col items-center gap-2">
    <div class="flex w-full flex-wrap gap-2">
      <Badge>Badge</Badge>
      <Badge variant="secondary">
        Secondary
      </Badge>
      <Badge variant="destructive">
        Destructive
      </Badge>
      <Badge variant="outline">
        Outline
      </Badge>
    </div>
    <div class="flex w-full flex-wrap gap-2">
      <Badge
        variant="secondary"
        class="bg-blue-500 text-white dark:bg-blue-600"
      >
        <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"
        variant="destructive"
      >
        99
      </Badge>
      <Badge
        class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums"
        variant="outline"
      >
        20+
      </Badge>
    </div>
  </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 | 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>

Frontic UI Extensions

Colors

All available semantic colors for badges.

Default
Primary
Secondary
Neutral
Positive
Destructive
Sale
Discount
New
Highlight
Price
<script setup lang="ts">
import { Badge } from '@/components/ui/badge'
</script>

<template>
  <div class="flex flex-wrap items-center gap-2">
    <Badge color="default">Default</Badge>
    <Badge color="primary">Primary</Badge>
    <Badge color="secondary">Secondary</Badge>
    <Badge color="neutral">Neutral</Badge>
    <Badge color="positive">Positive</Badge>
    <Badge color="destructive">Destructive</Badge>
    <Badge color="sale">Sale</Badge>
    <Badge color="discount">Discount</Badge>
    <Badge color="new">New</Badge>
    <Badge color="highlight">Highlight</Badge>
    <Badge color="price">Price</Badge>
  </div>
</template>

Variant Styles

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

Default
Primary
Positive
Destructive
Sale
Subtle
Primary
Positive
Destructive
Sale
Outline
Primary
Positive
Destructive
Sale
<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 variant="default" color="primary">Primary</Badge>
      <Badge variant="default" color="positive">Positive</Badge>
      <Badge variant="default" color="destructive">Destructive</Badge>
      <Badge variant="default" color="sale">Sale</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="positive">Positive</Badge>
      <Badge variant="subtle" color="destructive">Destructive</Badge>
      <Badge variant="subtle" color="sale">Sale</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="positive">Positive</Badge>
      <Badge variant="outline" color="destructive">Destructive</Badge>
      <Badge variant="outline" color="sale">Sale</Badge>
    </div>
  </div>
</template>

Sizes

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

Small
Default
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="default" color="primary">Default</Badge>
    <Badge size="lg" color="primary">Large</Badge>
  </div>
</template>

E-commerce Examples

Common badge use cases for e-commerce applications.

-30% OFF
NEW
SAVE $20
BEST SELLER
IN STOCK
OUT OF STOCK
$99.99
<script setup lang="ts">
import { Badge } from '@/components/ui/badge'
</script>

<template>
  <div class="flex flex-wrap items-center gap-2">
    <Badge color="sale">-30% OFF</Badge>
    <Badge color="new">NEW</Badge>
    <Badge color="discount">SAVE $20</Badge>
    <Badge color="highlight">BEST SELLER</Badge>
    <Badge color="positive">IN STOCK</Badge>
    <Badge variant="outline" color="destructive">OUT OF STOCK</Badge>
    <Badge color="price">$99.99</Badge>
  </div>
</template>

Examples

Secondary

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

<template>
  <Badge variant="secondary">
    Secondary
  </Badge>
</template>

Outline

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

<template>
  <Badge variant="outline">
    Outline
  </Badge>
</template>

Destructive

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

<template>
  <Badge variant="destructive">
    Destructive
  </Badge>
</template>
AvatarBreadcrumb