Salad UI

Badge

Renders a badge component.

Read more Read less

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>
Default Open in playground
Badge 
<.badge >
  Badge
</.badge>
Color variations with `variant` attribute. Open in playground
Default
Secondary
Destructive
Outline 
<.badge >
  Default
</.badge>
<.badge variant="secondary">
  Secondary
</.badge>
<.badge variant="destructive">
  Destructive
</.badge>
<.badge variant="outline">
  Outline
</.badge>