View Source SaladUI.Badge (SaladUI v1.0.0-beta.1)
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"
.- Global attributes are accepted.
Slots
inner_block
(required)