PrimarySecondarySuccessInfoWarningDangerOutline
"use client"
import { Badge, badgeStyles } from "@/components/ui/preskok-ui/badge"
function toTitleCase(text: string) {
return text.charAt(0).toUpperCase() + text.slice(1)
}
export function BadgePreskokDemo() {
const intents = Object.keys(badgeStyles.variants.intent) as Array<
keyof typeof badgeStyles.variants.intent
>
return (
<div className="flex flex-wrap items-center gap-2">
{intents.map((intent) => (
<Badge key={intent} intent={intent}>
{toTitleCase(intent)}
</Badge>
))}
</div>
)
}
Installation
pnpmnpmyarnbunpnpm dlx @preskok-org/ui@latest add badge
Usage
import { Badge } from "@/registry/preskok/ui/preskok-ui/badge"
export function BadgeDemo() {
return (
<div className="flex flex-wrap gap-2">
<Badge>Primary</Badge>
<Badge intent="secondary">Secondary</Badge>
<Badge intent="success">Success</Badge>
<Badge intent="warning">Warning</Badge>
<Badge intent="danger">Danger</Badge>
<Badge intent="outline">Outline</Badge>
</div>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
intent | "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "outline" | "primary" | Visual style variant |
isCircle | boolean | true | Rounded vs. squared badge |
className | string | - | Additional CSS classes |