Dados

Marcador removível

Chip

Um elemento compacto que pode representar uma seleção e permitir removê-la.

Design ×Produto ×Pesquisa ×

Exemplo didático · Representação visual do padrão

Quando usar

Exibir filtros ou valores já selecionados.

Cuidados e acessibilidade

Dê ao botão de remoção um nome específico, como Remover Design.

Partes e comportamento

Valor selecionado, rótulo curto e ação de remoção quando editável.

Não confunda

Uma pill descreve o formato arredondado, não necessariamente a função do componente.

Exemplo de código

<span class="chip">
  Design
  <button type="button" aria-label="Remover filtro Design">×</button>
</span>

Trecho didático. Integre e teste no contexto do seu projeto.

Peça assim para uma IA

Crie um componente de interface do tipo Marcador removível (Chip) em português do Brasil. Um elemento compacto que pode representar uma seleção e permitir removê-la. Contexto de uso: Exibir filtros ou valores já selecionados. Estrutura: Valor selecionado, rótulo curto e ação de remoção quando editável. Referência técnica: <button>. Requisito: Dê ao botão de remoção um nome específico, como Remover Design. Considere também: Uma pill descreve o formato arredondado, não necessariamente a função do componente. Adapte cores e tipografia ao projeto. Cubra estados inicial, foco, ativo, indisponível, carregamento, vazio e erro quando aplicáveis. Garanta contraste legível, comportamento responsivo, movimento reduzido e acesso por teclado. Use textos em PT-BR, valores em reais e datas no formato brasileiro quando houver. Explique quais partes exigem integração real e não simule sucesso sem concluir a operação.

Consultar referência técnica ↗Copiar link deste termo ↗