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
Secondary
Destructive
Outline
Attribute Type Documentation Default Value
class :string
variant :string

the badge variant style

"default"
rest :global
Required inner_block * :slot
[Multiple values]