Badge
Badge
Una piccola pillola di stato/etichetta. Renderizza uno <span>, o con asChild, qualsiasi singolo figlio tu passi.
import { Badge } from "@pompeitech/vesuvius-ui";Varianti
DefaultSecondaryDestructiveSuccessWarningInfoHighlightOutline
Con un'icona
Qualsiasi figlio <svg> (incluse le icone Lucide) viene dimensionato automaticamente a size-3:
Verified
Come link
asChild renderizza lo stile del badge su un singolo elemento figlio invece che su uno <span> — gli stati hover si adattano automaticamente ([a&]:hover:... nelle classi di variante si applica solo quando l'elemento renderizzato è un <a>):
API
Badge
| Prop | Tipo | Default | Descrizione |
|---|---|---|---|
variant | "default" | "secondary" | "destructive" | "success" | "warning" | "info" | "highlight" | "outline" | "default" | Stile visivo. |
asChild | boolean | false | Renderizza come il singolo elemento figlio invece che come <span>. |
Più ogni prop nativa di <span> (o qualsiasi elemento sia il figlio di asChild).