tag · Casa Hacker DS

overview

01

defaultcodebluepinkscriptpurpleredoutline

variantes

02

Por cor

codebluepinkscriptpurplered

Outline

outline

Dismissible

react

tamanhos

03

smalldefault

small: 20px · default: 24px

modifiers · api

04

prop	tipo	default	descrição
.tag	class	—	tag base
.tag--{cor}	class	—	code, blue, pink, script, purple, red, outline
.tag--sm	class	—	variante 20px
.tag--dismissible	class	—	adiciona botão remover

quando usar

05

use

Status (stable, beta, new, draft)
Categorias e filtros aplicados
Metadata como tag de post
Múltiplas seleções visuais

não use

Ação primária — usa button
Mais de 7 tags juntas — agrupa ou pagina
Tags sem significado claro (decorativas)

acessibilidade

06 · wcag aa

Cor não é único portador de significado
Ícones decorativos com aria-hidden
Botão dismiss com aria-label='remover tag'
Status badge com role='status' se reflete estado dinâmico

código

07 · html

<span class="tag tag--code">novo</span>
<span class="tag tag--purple">ia</span>

<!-- dismissible -->
<span class="tag tag--outline tag--dismissible">
  filtro<button aria-label="remover">×</button>
</span>