Badge

Usage

Meeting recorded

import { Badge } from '@jamie/ui/badge'
 
export function BadgeDemo() {
  return <Badge>Meeting recorded</Badge>
}

Variants

All six badge variants: default, secondary, destructive, outline, ghost, and link.

DefaultSecondaryDestructiveOutlineGhostLink

import { Badge } from '@jamie/ui/badge'
 
export function BadgeVariantsDemo() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge variant="default">Default</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="destructive">Destructive</Badge>
      <Badge variant="outline">Outline</Badge>
      <Badge variant="ghost">Ghost</Badge>
      <Badge variant="link">Link</Badge>
    </div>
  )
}

With Icon

Use data-icon="inline-start" on an icon element to add proper spacing inside a badge.

RecordingProcessingComplete

import { Badge } from '@jamie/ui/badge'
import { CheckCircleIcon, ClockIcon, MicIcon } from 'lucide-react'
 
export function BadgeWithIconDemo() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge>
        <MicIcon data-icon="inline-start" />
        Recording
      </Badge>
      <Badge variant="secondary">
        <ClockIcon data-icon="inline-start" />
        Processing
      </Badge>
      <Badge variant="outline">
        <CheckCircleIcon data-icon="inline-start" />
        Complete
      </Badge>
    </div>
  )
}