Badge
Etichette inline per stato, categorie e metadati: 11 varianti di colore, 4 dimensioni, icone, forme arrotondate o a pillola e contorni.
Usa il componente <Badge> per contrassegnare contenuti con indicatori di stato, etichette di categoria o marcatori di versione. I badge vengono visualizzati come elementi inline compatti, quindi puoi inserirli nel testo o disporli in un layout.
Badge di base
Un badge semplice con lo stile predefinito:
Predefinito<Badge>Default</Badge>Colori
I badge sono disponibili in 11 varianti di colore per comunicare significati diversi:
<Badge color="gray">Gray</Badge>
<Badge color="blue">Blue</Badge>
<Badge color="green">Green</Badge>
<Badge color="yellow">Yellow</Badge>
<Badge color="orange">Orange</Badge>
<Badge color="red">Red</Badge>
<Badge color="purple">Purple</Badge>Colori della superficie
Per badge che si adattano allo sfondo della pagina:
<Badge color="white">White</Badge>
<Badge color="surface">Surface</Badge>Colori distruttivi
Per stati di avviso o errore:
<Badge color="white-destructive">White Destructive</Badge>
<Badge color="surface-destructive">Surface Destructive</Badge>Con icone
Aggiungi icone per rendere i badge più descrittivi:
<Badge icon="circle-check" color="green">Verified</Badge>
<Badge icon="star" color="yellow">Featured</Badge>
<Badge icon="bolt" color="purple">New</Badge>
<Badge icon="clock" color="blue">Pending</Badge>Tipi di icona
Specifica uno stile diverso per l'icona usando iconType:
<Badge icon="star" iconType="solid" color="yellow">Solid</Badge>
<Badge icon="star" iconType="regular" color="yellow">Regular</Badge>
<Badge icon="star" iconType="duotone" color="yellow">Duotone</Badge>
<Badge icon="github" iconType="brands" color="gray">GitHub</Badge>Dimensioni
Sono disponibili quattro dimensioni per adattarsi a contesti diversi:
<Badge size="xs" color="blue">Extra Small</Badge>
<Badge size="sm" color="blue">Small</Badge>
<Badge size="md" color="blue">Medium</Badge>
<Badge size="lg" color="blue">Large</Badge>Forme
Scegli tra angoli arrotondati e forma a pillola:
<Badge shape="rounded" color="purple">Rounded</Badge>
<Badge shape="pill" color="purple">Pill</Badge>Variante con contorno
Usa badge con contorno per un aspetto visivo più leggero:
<Badge stroke color="blue">Outlined Blue</Badge>
<Badge stroke color="green">Outlined Green</Badge>
<Badge stroke color="red">Outlined Red</Badge>
<Badge stroke color="purple">Outlined Purple</Badge>Stato disabilitato
Riduci l'opacità per i badge inattivi:
<Badge disabled color="gray">Inactive</Badge>
<Badge disabled color="blue">Disabled</Badge>Utilizzo inline
I badge funzionano inline con il testo. Questa funzionalità richiede un abbonamento Premium. Puoi anche contrassegnare gli elementi come Nuovi o Obsoleti.
This feature requires a <Badge color="orange" size="sm">Premium</Badge> subscription.
You can also mark items as <Badge color="green" size="sm">New</Badge> or
<Badge color="red" size="sm">Deprecated</Badge>.Proprietà
Variante di colore: gray, blue, green, yellow, orange, red, purple, white, surface, white-destructive, surface-destructive.
Dimensione del badge: xs, sm, md, lg.
Forma del badge: rounded, pill.
Nome dell'icona Font Awesome.
Stile dell'icona: regular, solid, light, thin, sharp-solid, duotone, brands.
Visualizza un badge con contorno e sfondo trasparente.
Riduce l'opacità per indicare lo stato inattivo.
Classi CSS aggiuntive per la personalizzazione dello stile.