AvenUI.Components.Badge (AvenUI v1.0.0)

Copy Markdown View Source

Badge component for status indicators, labels, and counts.

Variants

  • default — neutral gray
  • primary — purple brand
  • success — green
  • warning — amber
  • danger — red
  • info — blue
  • outline — transparent with border

Examples

<.badge>Default</.badge>

<.badge variant="success">
  <.badge_dot /> Online
</.badge>

<.badge variant="danger" size="lg">Expired</.badge>

<%# Count badge %>
<.badge variant="primary">42</.badge>

Summary

Functions

badge(assigns)

Renders a badge for labels, status indicators, or counts.

badge_dot(assigns)

Dot indicator inside a badge — inherits color via currentColor.

Functions

badge(assigns)

Renders a badge for labels, status indicators, or counts.

Attributes

  • variant (:string) - Defaults to "default". Must be one of "default", "primary", "success", "warning", "danger", "info", or "outline".
  • size (:string) - Defaults to "md". Must be one of "sm", "md", or "lg".
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

badge_dot(assigns)

Dot indicator inside a badge — inherits color via currentColor.

Attributes

  • class (:string) - Defaults to nil.