Badge no SW Core — documentação e exemplos

O que é

É o "9" vermelho em cima do sininho de avisos, o "NOVO" ao lado de um produto, o "PAGO" numa tabela de pedidos. Você escreve  com o texto e acrescenta palavras para cor, estilo e tamanho: sw-badge="suc", sw-badge="out pri", sw-badge="err fl". O texto sai sempre em letras maiúsculas, com fonte de largura fixa.

É só CSS — não precisa de JavaScript. As cores seguem as do seu site e funcionam no tema claro e no escuro. Para o selo flutuar no canto de outro elemento (o número em cima do sininho), o elemento de fora precisa da classe bdg-wrap.

Quando usar

Contador de avisos, mensagens ou itens no carrinho (err fl no canto do botão).
Status numa tabela ou lista: Pago, Pendente, Cancelado.
Destaque de novidade: "Novo", "Beta", "-20%".
Online / offline ao lado de um nome (dot).
Para etiqueta que a pessoa remove com ×, use o Chip.

Comece aqui

1

Coloque o SW Core no <head>. O badge é só CSS.

<link rel="stylesheet" href="swcore/swcore.min.css">

2
Escreva o selo com a cor.

Pago
```
Pago
```

3

Para o selo ficar no canto de um botão, envolva os dois com class="bdg-wrap" e use fl:

9

<span class="bdg-wrap">
  <button sw-btn="ghost rnd" aria-label="Avisos"><i class="swi-bell"></i></button>
  <span sw-badge="err fl pp">9</span>
</span>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

1. Cores

Sem cor, o selo fica neutro (transparente com borda fina). As cores são chapadas, com texto branco.

Rascunho

Neutro (sem cor) Rascunho

Novo

pri — primária Novo

Beta

sec — secundária Beta

Pago

suc — verde Pago

Pendente

ale — amarelo Pendente

Cancelado

err — vermelho Cancelado

Enviado

inf — azul Enviado

Arquivado

drk — escuro/discreto Arquivado

2. Contorno (out)

Com out o selo fica só com a borda e o texto na cor. Sempre junto com uma cor.

Novo

out pri Novo

Beta

out sec Beta

Ativo

out suc Ativo

Revisar

out ale Revisar

Vencido

out err Vencido

Info

out inf Info

3. Tamanhos

Seis tamanhos, do menor ao maior.

-20%

pp -20%

-20%

p -20%

-20%

m -20%

-20%

g -20%

-20%

gg -20%

-20%

xg -20%

4. Pontinho de status (dot)

Com dot o selo vira só um pontinho que pulsa, sem texto. Escreva sempre uma cor junto.

Online

dot suc — online  Online

Ausente

dot ale — ausente  Ausente

Ocupado

dot err — ocupado  Ocupado

Em análise

dot inf  Em análise

Ao vivo

dot pri  Ao vivo

Agendado

dot sec  Agendado

5. Flutuando no canto (fl)

Com fl o selo sobe para o canto de cima, à direita, do elemento que tem class="bdg-wrap". Serve em botão, ícone ou avatar.

3

Número no botão com texto

<span class="bdg-wrap">
  <button sw-btn="out"><i class="swi-cart"></i> Carrinho</button>
  <span sw-badge="err fl pp">3</span>
</span>

12

Número no ícone redondo

<span class="bdg-wrap">
  <button sw-btn="ghost rnd" aria-label="Mensagens"><i class="swi-envelope"></i></button>
  <span sw-badge="pri fl pp">12</span>
</span>

Pontinho no ícone (dot fl)

<span class="bdg-wrap">
  <button sw-btn="ghost rnd" aria-label="Avisos novos"><i class="swi-bell"></i></button>
  <span sw-badge="dot err fl"></span>
</span>

MR

Pontinho no avatar

<span class="bdg-wrap">
  <span sw-avt="g">MR</span>
  <span sw-badge="dot suc fl"></span>
</span>

Tabela de opções

Palavra	O que faz	Exemplo
Cor
`(nenhuma)`	Neutro: transparente com borda fina e texto apagado.	`sw-badge`
`pri`	Primária.	`sw-badge="pri"`
`sec`	Secundária.	`sw-badge="sec"`
`suc`	Verde.	`sw-badge="suc"`
`ale`	Amarelo.	`sw-badge="ale"`
`err`	Vermelho.	`sw-badge="err"`
`inf`	Azul.	`sw-badge="inf"`
`drk`	Escuro/discreto (inverte com o tema).	`sw-badge="drk"`
Estilo
`out`	Só contorno, texto na cor. Use com pri, sec, suc, ale, err ou inf.	`sw-badge="out suc"`
`dot`	Só um pontinho pulsando, sem texto.	`sw-badge="dot suc"`
Tamanho
`pp`	Menor de todos (bom para contador em cima de ícone).	`sw-badge="pp"`
`p`	Pequeno (quase igual ao padrão, um pouco mais baixo).	`sw-badge="p"`
`m`	Médio.	`sw-badge="m"`
`g`	Grande.	`sw-badge="g"`
`gg`	Muito grande.	`sw-badge="gg"`
`xg`	Extra grande.	`sw-badge="xg"`
Posição
`fl`	Flutua no canto de cima, à direita, do pai com `class="bdg-wrap"`.	`sw-badge="err fl"`
`bdg-wrap`	Classe no elemento de fora: é a referência do `fl`.	`<span class="bdg-wrap">…</span>`

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

Topo da loja: carrinho com quantidade Ao vivo

Entrar 2

<nav class="flx j-en alc gap-3">
  <a href="/entrar" sw-btn="ghost">Entrar</a>
  <span class="bdg-wrap">
    <a href="/carrinho" sw-btn="pri rnd" aria-label="Carrinho: 2 itens"><i class="swi-cart"></i></a>
    <span sw-badge="err fl pp">2</span>
  </span>
</nav>

Painel: status dos pedidos Ao vivo

#1042 · Ana NunesPago

#1043 · Bruno LimaPendente

#1044 · Carla MeloEnviado

#1045 · Diego ReisCancelado

<div class="flx f-cl gap-2">
  <div class="flx j-sb alc gap-3"><span>#1042 · Ana Nunes</span><span sw-badge="suc">Pago</span></div>
  <div class="flx j-sb alc gap-3"><span>#1043 · Bruno Lima</span><span sw-badge="ale">Pendente</span></div>
  <div class="flx j-sb alc gap-3"><span>#1044 · Carla Melo</span><span sw-badge="inf">Enviado</span></div>
  <div class="flx j-sb alc gap-3"><span>#1045 · Diego Reis</span><span sw-badge="out err">Cancelado</span></div>
</div>

Produto: selo de desconto e novidade Ao vivo

Tênis Corrida Pro Novo -20%

<div class="flx alc gap-2">
  <strong>Tênis Corrida Pro</strong>
  <span sw-badge="pri pp">Novo</span>
  <span sw-badge="suc pp">-20%</span>
</div>

Menu lateral: contador ao lado do item Ao vivo

Mensagens12 Pedidos3 Clientes248

<div class="flx f-cl gap-2">
  <a href="#" class="flx j-sb alc gap-3"><span><i class="swi-envelope"></i> Mensagens</span><span sw-badge="pri">12</span></a>
  <a href="#" class="flx j-sb alc gap-3"><span><i class="swi-cart"></i> Pedidos</span><span sw-badge="err">3</span></a>
  <a href="#" class="flx j-sb alc gap-3"><span><i class="swi-user"></i> Clientes</span><span sw-badge>248</span></a>
</div>

Precisa de quê

swcore.min.css.
swcore.compl.min.css — só se usar ícone swi-* junto.

Cuidados — erros comuns

fl sem o pai class="bdg-wrap": o selo voa para o canto de algum outro bloco da página (ou da própria página).
bdg-wrap é classe; sw-badge é atributo. Não troque.
dot sem cor fica quase invisível no tema claro. Escreva sempre a cor: sw-badge="dot suc".
Contador sozinho em cima de um ícone não diz nada para quem usa leitor de tela: coloque a informação no aria-label do botão ("Carrinho: 2 itens").
Uma palavra de cada grupo: duas cores (suc err) brigam e vale a que vem por último no CSS.

O que ele não faz

out não existe para drk: com out drk o texto fica na cor do fundo e some.
O texto é sempre em maiúsculas; para minúsculas, use o Chip.
fl só posiciona no canto de cima à direita.
Não conta nada sozinho: o número é você que escreve (ou troca por JavaScript).

Badge CSS

O que é

Quando usar

Comece aqui

Todas as variações

1. Cores

2. Contorno (out)

3. Tamanhos

4. Pontinho de status (dot)

5. Flutuando no canto (fl)

Tabela de opções

Receitas prontas — usos reais

Precisa de quê

Cuidados — erros comuns

O que ele não faz