Exibição

Selo

Status em quatro tons e variação percentual que fica verde ou vermelha.

só CSS

Exemplo

Entregue Em rota Falha na entrega Em análise Neutro Novo +14,8% -3,2%

<span class="u-badge u-badge--ok">Entregue</span>
<span class="u-badge u-badge--warn">Em rota</span>
<span class="u-badge u-badge--err">Falha na entrega</span>
<span class="u-badge u-badge--info">Em análise</span>
<span class="u-badge">Neutro</span>
<span class="u-badge u-badge--pill">Novo</span>
<span class="u-badge u-badge--delta">+14,8%</span>
<span class="u-badge u-badge--delta" data-dir="down">-3,2%</span>

Instalação

Selo vem no pacote completo, em unslop.css:

curl -fsSL unslop.leallabs.dev/i | sh

Sem build É só CSS: com unslop.css na página, as classes já funcionam.

Classes e variantes

Classe	O que faz
`u-badge`	Base neutra, 24px de altura.
`u-badge--ok, --warn, --err, --info`	Tons de estado, com fundo suave e texto medido.
`u-badge--pill`	Cantos totalmente redondos.
`u-badge--delta`	Variação positiva. Com `data-dir="down"`, vira queda em vermelho.

Acessibilidade e teclado

Estado e papéis

Onde	Atributo	O que diz
texto	conteúdo	A cor nunca é a única pista: escreva o status ou o sinal.