Mokri

Preview

Installation

<> import.ts

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

Code

<> component.tsx

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

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

API Reference

Badge

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

<> import.ts

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

Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	Content to display inside the badge
`onClick`	`() => void`	—	Click handler for the badge
`className`	`string`	`""`	Additional CSS classes
`bg`	`boolean`	`true`	Whether to show background color
`hover`	`boolean`	`false`	Whether to show hover effects
`variant`	`"default" \| "secondary" \| "destructive" \| "muted"`	`"default"`	Visual variant of the badge

Examples

Example 1

<> example.tsx

// Basic badge
<Badge>Default</Badge>

Example 2

<> example.tsx

// Different variants
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="muted">Muted</Badge>

Example 3

<> example.tsx

// Badge without background
<Badge bg={false}>No Background</Badge>

Example 4

<> example.tsx

// Clickable badge
<Badge onClick={() => console.log('Clicked')}>
  Clickable Badge
</Badge>

Example 5

<> example.tsx

// Badge with hover effect
<Badge hover={true} variant="secondary">
  Hover Badge
</Badge>