# Tag Uma etiqueta curta com o estado de um item: em dia, atrasado, fora do ar. ## Playground ```html Atrasado ``` ## 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 ### 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 ```html Atrasado ``` ### 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 ```html em breve ``` ## 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.