Implementation of badge component for displaying short labels, statuses, or counts.
Badges are small UI elements typically used to highlight status, categories, or counts in a compact format. They are designed to be visually distinct and draw attention to important information.
Examples:
<.badge>New</.badge>
<.badge variant="secondary">Beta</.badge>
<.badge variant="destructive">Error</.badge>
<.badge variant="outline">Version 1.0</.badge>
<div class="flex gap-2">
<.badge>Default</.badge>
<.badge variant="secondary">Secondary</.badge>
<.badge variant="destructive">Destructive</.badge>
<.badge variant="outline">Outline</.badge>
</div>Summary
Functions
Renders a badge component.
Functions
Renders a badge component.
Options
:class- Additional CSS classes to apply to the badge.:variant- The visual style of the badge. Available variants:"default"- Primary color with white text (default)"secondary"- Secondary color with contrasting text"destructive"- Typically red, for warning or error states"outline"- Bordered style with no background
Examples
<.badge>Badge</.badge>
<.badge variant="destructive">Warning</.badge>
<.badge variant="outline" class="text-sm">Custom</.badge>Attributes
class(:string) - Defaults tonil.variant(:string) - the badge variant style. Defaults to"default". Must be one of"default","secondary","destructive", or"outline".- Global attributes are accepted.
Slots
inner_block(required)