Badge

A small pill-style label for statuses and counts

A badge component for showing statuses, categories, or counts. Use it for tags, labels, or small numeric indicators.

New

import { Badge } from "@/components/ui/badge";

export default function Example() {
  return <Badge>New</Badge>;
}

View Code

Installation

bash

liminal add badge

Usage

New

import { Badge } from "@/components/ui/badge";

export default function Example() {
  return <Badge>New</Badge>;
}

View Code

Examples

Variants

DefaultSecondaryDestructiveOutline

<Badge variant="default">Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="outline">Outline</Badge>

View Code

API

Prop	Type	Default	Description
variant	"default" \| "secondary" \| "destructive" \| "outline"	"default"	Visual style of the badge.