Badge

Neutro Accento Pubblicata Da verificare Rifiutata Novità

Cos'è

Un'etichetta piccola, che non si clicca, per indicare uno stato o una caratteristica.

Quando usarlo

Per uno stato: "Pubblicata", "Da verificare", "Novità".
Per una caratteristica breve accanto a un titolo.

Quando non usarlo

Se si deve cliccare: usa il filtro o un bottone.
Per uno stato che un livello brand ha già definito con un suo componente: usa quello.
Per frasi: un badge sta in una-tre parole.

Codice

<span class="grigna-badge">Bozza</span>
<span class="grigna-badge grigna-badge--success">
  <i data-lucide="check" aria-hidden="true"></i>Pubblicata
</span>

Varianti

Classe	Uso
(nessuna)	Neutro: caratteristiche senza giudizio
`grigna-badge--accent`	Evidenza legata al brand, con parsimonia
`grigna-badge--success`	Esito positivo, completato
`grigna-badge--warning`	Richiede attenzione
`grigna-badge--danger`	Errore, rifiutato, bloccato
`grigna-badge--info`	Informazione, novità

Token

--grigna-badge-height, -padding-x, -gap, -radius, -font, più -{variante}-bg e -{variante}-text per ogni variante, e -neutral-border (tutti con prefisso --grigna-badge).

Accessibilità

Il testo dice lo stato: il colore lo rinforza ma non lo sostituisce.
Le icone nel badge sono decorative (aria-hidden="true").

Per gli agenti

Sempre

<span class="grigna-badge"> con al massimo un modificatore di variante.
Testo di una-tre parole che dice lo stato.

Mai

Mai un badge cliccabile.
Mai un badge solo colorato, senza testo.
Mai usare i badge di feedback al posto dei componenti di stato di un livello brand.