Badge

npx shadcn@latest add https://ui.saasflare.io/r/badge.json

pnpm add @saasflare/ui

"use client"import { Badge } from "@saasflare/ui"/** Status badges across the six semantic intents. */export function Demo() {    return (        <div className="flex flex-wrap items-center gap-2">            <Badge intent="primary">New</Badge>            <Badge intent="success">Active</Badge>            <Badge intent="warning">Trial ending</Badge>            <Badge intent="danger">Past due</Badge>            <Badge intent="info">Beta</Badge>            <Badge intent="neutral">Archived</Badge>        </div>    )}

"use client"import { Badge } from "@saasflare/ui"/** The three visual treatments — solid, soft, and outline. */export function Demo() {    return (        <div className="flex flex-wrap items-center gap-2">            <Badge variant="solid" intent="success">                Solid            </Badge>            <Badge variant="soft" intent="success">                Soft            </Badge>            <Badge variant="outline" intent="success">                Outline            </Badge>        </div>    )}

"use client"import { Badge, CheckCircleIcon, WarningIcon } from "@saasflare/ui"/** Badges with a leading status icon. */export function Demo() {    return (        <div className="flex flex-wrap items-center gap-2">            <Badge variant="soft" intent="success">                <CheckCircleIcon />                Deployed            </Badge>            <Badge variant="soft" intent="warning">                <WarningIcon />                Degraded            </Badge>        </div>    )}