Provides <.badge> component for status indicators, labels, and notification counts.

Badges are compact visual markers rendered as inline <span> elements that highlight information through semantic colors, size variants, and visual styles. They support six visual variants, five semantic colors, and five sizes with automatic icon scaling. All styles adapt to light and dark modes via your design system's color tokens.

Basic Usage

Render badges with content and optional styling attributes:

<.badge>Default Badge</.badge>
<.badge color="success">Active</.badge>
<.badge color="danger" size="lg">Error</.badge>
<.badge variant="ghost" color="info">Draft</.badge>

Visual Variants

Choose from six visual styles based on emphasis needs:

<.badge variant="solid" color="success">Solid</.badge>
<.badge variant="soft" color="info">Soft</.badge>
<.badge variant="surface" color="warning">Surface (Default)</.badge>
<.badge variant="outline" color="primary">Outline</.badge>
<.badge variant="dashed" color="warning">Dashed</.badge>
<.badge variant="ghost" color="primary">Ghost</.badge>

Each variant is designed for specific use cases:

• solid: Filled badge with strongest visual weight, perfect for high-priority status
• soft: Subtle background without border, ideal for informational badges
• surface: Like soft but with a border, great for contained status indicators (default)
• outline: Border with transparent background, good for general purpose badges
• dashed: Dashed border with transparent background, useful for draft or placeholder states
• ghost: No border or background, minimal styling for subtle indicators

Semantic Colors

Use semantic colors to convey meaning and status. Each color includes specific styles for all variants and maintains proper contrast in both light and dark modes:

<.badge color="primary">Featured</.badge>
<.badge color="info">Information</.badge>
<.badge color="success">Completed</.badge>
<.badge color="warning">Pending</.badge>
<.badge color="danger">Failed</.badge>

Available colors and their common use cases:

• primary: Branded or featured content (e.g., featured, new, promoted)
• info: Informational labels (e.g., beta, note, details)
• success: Positive status (e.g., active, completed, verified)
• warning: Attention-needed status (e.g., pending, expiring, review)
• danger: Critical or negative status (e.g., failed, error, overdue)

Size Variants

Scale badges appropriately for different contexts:

<.badge size="xs">Extra Small</.badge>
<.badge size="sm">Small</.badge>
<.badge size="md">Medium (Default)</.badge>
<.badge size="lg">Large</.badge>
<.badge size="xl">Extra Large</.badge>

With Icons

Icons placed inside the badge slot are automatically sized and spaced based on the badge's size attribute. Always add the icon class to <.icon> for correct scaling:

<.badge color="success">
  <.icon name="hero-check-circle" class="icon" /> Verified
</.badge>

<.badge color="warning" size="sm">
  <.icon name="hero-clock" class="icon" /> Pending
</.badge>

<.badge color="danger" variant="ghost">
  <.icon name="hero-x-circle" class="icon" /> Failed
</.badge>

<.badge color="success">
  <.icon name="hero-check" class="icon" /> Done
</.badge>

Common Patterns

Status Indicators

<div class="flex items-center gap-2">
  <span>Database</span>
  <.badge variant="solid" color="success">
    <.icon name="hero-check-circle" class="icon" /> Online
  </.badge>
</div>

Navigation Counts

<div class="flex items-center justify-between">
  <span>Messages</span>
  <.badge color="info">12</.badge>
</div>

Filter Tags

<.badge
  :for={tag <- @active_filters}
  variant="dashed"
  color="primary"
  phx-click="remove_filter"
  phx-value-tag={tag}
  class="cursor-pointer"
>
  <.icon name="hero-x-mark" class="icon" /> {tag}
</.badge>

Interactive Selection

<.badge
  color={if @selected, do: "primary", else: "info"}
  variant={if @selected, do: "solid", else: "dashed"}
  phx-click="toggle_selection"
  class="cursor-pointer"
>
  <.icon :if={@selected} name="hero-check" class="icon" />
  Category
</.badge>