Badge + text description combo component.
Renders a pill-shaped container with a badge element on the left and description text on the right, separated by a subtle visual boundary. Commonly seen in marketing UIs as "New feature — Check out our latest update".
Variants
| Variant | Visual |
|---|---|
:default | Muted background with subtle border |
:outline | Border only, transparent background |
:ghost | No border, subtle background |
Examples
<.badge_group>
<:badge>New</:badge>
Check out our latest feature
</.badge_group>
<.badge_group variant={:outline} size={:lg}>
<:badge>v2.0</:badge>
Major release with breaking changes
</.badge_group>Summary
Functions
Attributes
variant(:atom) - Defaults to:default. Must be one of:default,:outline, or:ghost.size(:atom) - Defaults to:default. Must be one of:sm,:default, or:lg.class(:string) - Defaults tonil.- Global attributes are accepted.
Slots
badge(required) - Badge pill content (left side).inner_block(required) - Description text (right side).