Fluxon.Components.Badge (Fluxon v2.0.0)

Provides a versatile badge component for status indicators, categories, and notification counts.

Badges are compact visual markers that highlight information and provide contextual meaning through semantic colors, size variants, and visual styles. They integrate seamlessly with your design system's color tokens and automatically adapt to light and dark modes.

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>

Semantic Colors

Use semantic colors to convey meaning and status:

<.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>

Visual Variants

Choose from six visual styles based on emphasis needs:

<.badge variant="solid" color="success">High Emphasis</.badge>
<.badge variant="soft" color="info">Medium Emphasis</.badge>
<.badge variant="surface" color="warning">Contained</.badge>
<.badge variant="outline" color="primary">Outline</.badge>
<.badge variant="dashed" color="warning">Draft State</.badge>
<.badge variant="ghost" color="primary">Minimal</.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
  • 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

Size Variants

Scale badges appropriately for different contexts:

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

With Icons

Enhance badges with icons for better visual communication:

<.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>

Icons automatically scale with badge size and require the icon class for proper alignment.

Interactive Usage

Badges can be made interactive with Phoenix LiveView events:

<!-- Toggle selection state -->
<.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>

<!-- Notification counter -->
<.badge color="danger" phx-click="view_messages">
  {@message_count}
</.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>

Summary

Components

badge(assigns)

Renders a badge component with customizable styling and semantic meaning.

Components

badge(assigns)

Renders a badge component with customizable styling and semantic meaning.

This component provides visual indicators that adapt to your design system's color palette and supports variants, colors, and sizes for different contexts.

Attributes

  • class (:any) - Additional CSS classes to apply to the badge element. Defaults to nil.

  • color (:string) - The semantic color that determines visual appearance and meaning. Available options: primary, info, success, warning, danger.

    Defaults to "primary".

  • size (:string) - The size variant that controls dimensions, typography, and icon scaling. Defaults to "md".

  • variant (:string) - The visual style variant that determines emphasis level and background treatment:

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

    Defaults to "surface".

  • Global attributes are accepted. Additional HTML attributes to apply to the badge element.

Slots

  • inner_block (required) - The content to be displayed within the badge. Accepts text, icons, or both. When including icons, use the icon class for proper scaling and alignment.