Tag
Uma etiqueta curta com o estado de um item: em dia, atrasado, fora do ar.
Nesta página
Playground
Atrasado
Estado
Tamanho
Fundo
<span class="feitio-tag"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-info"></use></svg>Atrasado</span>Quando usar
- Para o estado de um item numa tabela, numa lista ou num título.
Quando não usar
- Para algo clicável: etiqueta não é botão nem link.
- Para chamar atenção ("Novo", "Destaque" em toda parte): é o "barulhento".
- Para um aviso: Notice.
Exemplos
RascunhoNo arAtrasadoFora do ar
Os quatro
Neutra, certo, atenção e erro, sempre com o traço em volta, para não sumir num monitor fraco. Nunca laranja, sempre com ícone e palavra.
Mostrar código
<span class="feitio-tag" data-status="warn">
<svg class="feitio-icon" aria-hidden="true">…</svg>Atrasado
</span>Reactem breve
Pequena
Ao lado de um nome numa lista ou num menu, quando a de tamanho normal pesaria: o "em breve" da navegação deste site é uma.
Mostrar código
<span class="feitio-tag" data-size="small">em breve</span>Bons e maus padrões
Faça assim
Atrasado
Uma palavra, com ícone: lê-se de longe e sem cor.
Não faça
Atrasado
Laranja, caixa alta, pílula perfeita e sem ícone.
Como escrever
- Uma ou duas palavras, no adjetivo ou no estado ("Em dia", "Atrasado").
Acessibilidade
- A palavra é o estado; o ícone acompanha (
aria-hidden).
Atributos
| Atributo | Valores | Para quê |
|---|---|---|
class="feitio-tag" | obrigatório | A etiqueta. |
data-status | nenhum, "ok", "warn", "error" | Neutra (sem o atributo), certo, atenção ou erro. |
data-size="small" | opcional | A pequena, ao lado de um nome numa lista. |