Badge
Badge
A small status/label pill. Renders a <span>, or with asChild, whatever single child you give it.
import { Badge } from "@pompeitech/vesuvius-ui";Variants
DefaultSecondaryDestructiveSuccessWarningInfoHighlightOutline
With an icon
Any <svg> child (including a Lucide icon) is sized to size-3 automatically:
Verified
As a link
asChild renders the badge's styling on a single child element instead of a <span> — hover states adjust automatically ([a&]:hover:... in the variant classes only applies when the rendered element is an <a>):
API
Badge
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "secondary" | "destructive" | "success" | "warning" | "info" | "highlight" | "outline" | "default" | Visual style. |
asChild | boolean | false | Render as the single child element instead of a <span>. |
Plus every native <span> prop (or whatever element asChild's child is).