shadszn/ui

Badge

A compact status indicator with 8 semantic color variants for labels and statuses.

Preview

Default
Active
Maintenance
Deprecated
Info
Warning
Error
Critical

Installation

npx shadcn@latest add @shadszn/badge

Usage

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

export default function Example() {
  return <Badge variant="active">Online</Badge>
}

Variants

<Badge variant="default">Default</Badge>
<Badge variant="active">Active</Badge>
<Badge variant="maintenance">Maintenance</Badge>
<Badge variant="deprecated">Deprecated</Badge>
<Badge variant="info">Info</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="error">Error</Badge>
<Badge variant="critical">Critical</Badge>

Props

PropTypeDefaultDescription
variant"default" | "active" | "maintenance" | "deprecated" | "info" | "warning" | "error" | "critical""default"Semantic color variant.
classNamestring---Additional CSS classes.