View Source PineUi.Badge (Pine UI v0.1.2)

Provides badge components for status indicators.

The Badge module offers several variants for indicating status:

Summary

Functions

Renders a basic badge component.

Renders a dismissible badge.

Renders a badge with a status dot.

Functions

Renders a basic badge component.

Examples

<.base variant="success">Completed</.base>

<.base variant="warning" class="ml-2">Pending</.base>

Options

  • :variant - Color variant: "success", "warning", "danger", "info", "purple", "pink", "indigo", or "default" (gray)
  • :class - Additional CSS classes (optional)
  • :icon - HTML string for an icon to display before text (optional)

Renders a dismissible badge.

Examples

<.dismissible variant="info">New Feature</.dismissible>

<.dismissible variant="purple" class="ml-2">Beta</.dismissible>

Options

  • :variant - Color variant: "success", "warning", "danger", "info", "purple", "pink", "indigo", or "default" (gray)
  • :class - Additional CSS classes (optional)

Renders a badge with a status dot.

Examples

<.dot variant="success">Active</.dot>

<.dot variant="danger" class="ml-2">Offline</.dot>

Options

  • :variant - Color variant: "success", "warning", "danger", "info", "purple", "pink", "indigo", or "default" (gray)
  • :class - Additional CSS classes (optional)