View Source Lume.Components.Badge (lume v0.3.0)

A simple badge component for status indicators, labels, and counts.

Features

  • Multiple color variants (default, primary, success, warning, error)
  • Three sizes (small, medium, large)
  • Shape options (pill or flat)
  • Optional border styling
  • Optional leading dot indicator
  • Optional icon
  • Dark mode support

Examples 

# Basic badge
<.badge>Default</.badge>

# Primary badge with icon
<.badge variant={:primary} icon="hero-star">
  Featured
</.badge>

# Success badge with dot indicator
<.badge variant={:success} show_dot>
  Online
</.badge>

# Warning badge with flat shape and border
<.badge
  variant={:warning}
  shape={:flat}
  bordered
>
  Beta
</.badge>

# Large error badge with icon
<.badge
  variant={:error}
  size={:lg}
  icon="hero-exclamation-circle"
>
  Critical
</.badge>

Summary

Functions

badge(assigns)

Renders a badge component.

Functions

badge(assigns)

Renders a badge component.

Attributes

  • variant - Color variant (:default, :primary, :success, :warning, :error), defaults to :default
  • size - Size variant (:sm, :md, :lg), defaults to :md
  • shape - Shape variant (:pill, :flat), defaults to :pill
  • bordered - Whether to show a border matching the text color, defaults to false
  • show_dot - Whether to show a leading dot indicator, defaults to false
  • icon - Optional icon name (from heroicons)
  • class - Additional CSS classes to apply to the badge

Slots

  • inner_block - Required. The content to display inside the badge

Attributes

  • variant (:atom) - Defaults to :default.
  • size (:atom) - Defaults to :md.
  • shape (:atom) - Defaults to :pill.
  • bordered (:boolean) - Defaults to false.
  • icon (:string) - Defaults to nil.
  • show_dot (:boolean) - Defaults to false.
  • class (:string) - Defaults to nil.

Slots

  • inner_block (required)