Chip

O mk-chip exibe um rótulo compacto com suporte a múltiplas cores, estilos visuais, ícone opcional e botão de fechar. O chip comunica atributos ou categorias de forma visual e densa — aparece em filtros, tags de conteúdo, status de registros e listas de seleção, permitindo identificar rapidamente a qual categoria um item pertence sem precisar ler descrições longas.

Quando usar

Use o mk-chip para representar categorias ou atributos de forma compacta e visualmente distinta.

• Um item pertence a uma categoria identificável visualmente.
• O usuário precisa filtrar ou selecionar por categorias.
• Múltiplos atributos precisam ser exibidos de forma compacta junto a um registro.

• O estado for binário (ativo/inativo) — use mk-badge ou um indicador de status.

• A ação for remover o item — certifique-se de incluir o ícone de fechar via a prop closable.

Anatomia

Cores

import { MkChip } from '@db1/makuco-ui-react';

<MkChip label="Violet" color="violet" />
<MkChip label="Success" color="success" />
<MkChip label="Error" color="error" />

<mk-chip label="Violet" color="violet"></mk-chip>
<mk-chip label="Success" color="success"></mk-chip>
<mk-chip label="Error" color="error"></mk-chip>

Variantes

Use cores com significado consistente em todo o produto — por exemplo, error sempre para erros e success sempre para aprovado. subtle usa fundo claro com texto escuro, sendo preferível em contextos com muitos chips para reduzir a poluição visual. strong inverte para fundo escuro com texto claro, sendo indicado quando a categoria é crítica ou precisa de maior destaque.

<MkChip label="Subtle" color="violet" variant="subtle" />
<MkChip label="Strong" color="violet" variant="strong" />

<mk-chip label="Subtle" color="violet" variant="subtle"></mk-chip>
<mk-chip label="Strong" color="violet" variant="strong"></mk-chip>

Com ícone

Use o ícone para reforçar o significado semântico da cor, tornando a categoria mais clara mesmo sem depender apenas da cor como único indicador.

<MkChip label="Em andamento" color="info" leadingIcon="clock" />
<MkChip label="Concluído" color="success" leadingIcon="check-circle" />

<mk-chip label="Em andamento" color="info" leading-icon="clock"></mk-chip>
<mk-chip label="Concluído" color="success" leading-icon="check-circle"></mk-chip>

Fechável

Use closable quando o chip representar um filtro ativo ou uma seleção que o usuário pode remover. Certifique-se de fornecer um aria-label descritivo no handler para que o contexto da remoção fique claro.

<MkChip
  label="Remover filtro"
  color="violet"
  closable
  onMkClose={() => console.log('fechado')}
/>

<mk-chip
  label="Remover filtro"
  color="violet"
  closable
  (mkClose)="handleClose()"
></mk-chip>

Quebra de linha

O rótulo quebra em várias linhas quando o chip é comprimido — dentro de um container mais estreito que o texto, ou como item flexível que encolhe. Solto no fluxo, o chip dimensiona pelo conteúdo, ocupa uma linha e mede 24px de altura.

A altura é piso, não medida fixa: a pílula cresce junto com o rótulo. O ícone e o botão de fechar não encolhem — quem cede espaço é o texto. Rótulos de palavra única, como e-mails e URLs, quebram no meio da palavra quando não há outro ponto de quebra.

<div style={{ width: 140 }}>
  <MkChip label="engenharia de plataforma" closable />
</div>

<div style="width: 140px">
  <mk-chip label="engenharia de plataforma" closable></mk-chip>
</div>

CSS Parts

O chip expõe suas partes internas para estilo externo via ::part(). Alcançam um nível de shadow root — funcionam do documento para um mk-chip no light DOM, e de dentro do shadow de um componente que renderize mk-chip diretamente.

mk-chip::part(root) {
  border: 1px solid var(--db1-color-neutral-300);
}
mk-chip::part(label) {
  text-transform: uppercase;
}

Comportamento

O chip é um elemento estático por padrão — não é interativo a menos que a prop closable esteja ativa. Quando closable está habilitado, o botão de fechar emite o evento mkClose ao ser clicado, cabendo ao consumidor remover o chip do DOM ou da lista de seleção.

A combinação de cor e variante não altera o comportamento do chip — apenas sua aparência visual. Ao usar múltiplos chips em um mesmo contexto, mantenha a paleta de cores consistente para que cada cor represente sempre o mesmo conceito semântico ao longo do produto.

Composição

Em tabelas, o chip aparece dentro de células para categorizar registros. Em filtros, chips com closable representam opções ativas que o usuário pode remover. Combine no máximo 3 a 4 chips por item para não sobrecarregar visualmente o conteúdo.

Use cores com significado consistente em todo o produto — ex.: error sempre para erros, success sempre para aprovado.

Props

Eventos

Acessibilidade

• O botão de fechar possui aria-label="Remove" por padrão. Use closeLabel para dar um nome único a cada botão quando houver vários chips fecháveis na mesma tela — ex.: closeLabel="Remover TypeScript".
• O chip em si é um <span> — não é interativo a menos que closable esteja ativo.

Cor não é o único indicador: cada categoria deve ser identificável também pelo texto do rótulo — nunca use chips onde a única diferença entre categorias seja a cor.

Ícone de fechar acessível: se o chip for removível, customize o closeLabel com o contexto completo — por exemplo, "Remover tag Urgente" em vez de apenas "Fechar" — para que leitores de tela comuniquem claramente o que será removido.