Badge

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Badge
  label="label"
  variant="neutral"
/>

Legacy mount name: data-component="Badge".

Props and attributes

Slots

• default

Events

This component does not declare a custom event.

Source contract

Installed source: components/Badge.wrn

component Badge {
  props {
    class = ""
    label = ""
    variant = "neutral"
  }
  view {
        <span class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold ring-1 ring-inset {variant === 'success' ? 'bg-emerald-50 text-emerald-700 ring-emerald-600/20 dark:bg-emerald-950/40 dark:text-emerald-300' : variant === 'warning' ? 'bg-amber-50 text-amber-700 ring-amber-600/20 dark:bg-amber-950/40 dark:text-amber-300' : variant === 'danger' ? 'bg-red-50 text-red-700 ring-red-600/20 dark:bg-red-950/40 dark:text-red-300' : variant === 'brand' ? 'bg-violet-50 text-violet-700 ring-violet-600/20 dark:bg-violet-950/40 dark:text-violet-300' : 'bg-slate-100 text-slate-700 ring-slate-600/10 dark:bg-slate-800 dark:text-slate-300'} {class}">{label}<slot />
        </span>
    }
}