The <luna-badge> component displays small labels for categorization and status indication.
Paths
/lunadom/components/badge/badge.js REQUIRED
Example
Default
Variants
Default
New
Fixed
Breaking
Critical
Pill & Pulse
99+
Customization
Slots
default - Content for the badge
Attributes
variant="default" - Variant of the badge (default, primary, success, warning, danger)
pill - Whether the badge has pill shape
dot - Whether the badge is a small dot indicator
pulse - Whether the badge has pulse animation
CSS Variables
--luna-badge-bg - Badge background color
--luna-badge-color - Badge text color
Example Code
<!-- Variants -->
<luna-badge>Default</luna-badge>
<luna-badge variant="primary">New</luna-badge>
<luna-badge variant="success">Fixed</luna-badge>
<luna-badge variant="warning">Breaking</luna-badge>
<luna-badge variant="danger">Critical</luna-badge>
<!-- Pill & Pulse -->
<luna-badge pill variant="primary">99+</luna-badge>
<luna-badge dot pulse variant="success"></luna-badge>
<luna-badge dot variant="danger"></luna-badge>
<luna-badge dot pulse variant="warning"></luna-badge>