View Source Lume.Components.Badge (lume v0.1.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
Renders a badge component.
Functions
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 tofalse
show_dot
- Whether to show a leading dot indicator, defaults tofalse
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 tofalse
.icon
(:string
) - Defaults tonil
.show_dot
(:boolean
) - Defaults tofalse
.class
(:string
) - Defaults tonil
.
Slots
inner_block
(required)