Renders a badge.

<.badge color="success" variant="soft" shape="pill" dot>Active</.badge>

Attributes

• color (:string) - white is for badges on colored or gradient cards: variant="outline" is a white outline, soft a translucent white chip. Defaults to "neutral". Must be one of "neutral", "primary", "secondary", "info", "success", "warning", "error", "dark", "light", or "white".
• variant (:string) - flat is only the colored text, as LineOne's badges with dots. Defaults to "solid". Must be one of "solid", "glow", "soft", "outline", or "flat".
• size (:string) - Fixed heights as LineOne's compact badges: xs h-4.5, sm h-5, md h-5.5 with larger text, lg h-6. Without it the badge keeps its padding-based height. Defaults to nil. Must be one of nil, "xs", "sm", "md", or "lg".
• shape (:string) - Defaults to "rounded". Must be one of "rounded", "pill", or "square".
• dot (:boolean) - A dot in the badge's color before the content. Defaults to false.
• on_remove (:any) - An event name or a JS command: adds a small round remove button after the content. The event's payload is %{"id" => id}. Defaults to nil.
• id (:string) - Defaults to nil.
• target (:any) - The phx-target of on_remove when it is an event name. Defaults to nil.
• remove_label (:string) - Defaults to "Remove".
• class (:any) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)