PineUiPhoenix.Badge (Pine UI v0.1.3)
View SourceProvides badge components for status indicators.
The Badge module offers several variants for indicating status:
base/1
- Simple colored badgedot/1
- Badge with a status dotdismissible/1
- Badge that can be dismissed
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)