Chip

Quando usar

Status de compromisso (pago, a vencer, vencido, agendado), filtro ativo, categoria de gasto, delta comparativo.

Quando não usar

• Para ação — usar Button emphasis=tertiary.
• Para texto decorativo — chip sem função de estado é ruído.

Anatomia

O chip tem no máximo dois elementos visíveis: ícone opcional à esquerda e label obrigatório. O fundo tint é gerado a partir da cor funcional do tone.

Partes do componente:

• label — string curta, 1–3 palavras, uppercase, tracking loose.
• tone — success · info · alert · error. Define cor e tint.
• icon (opcional) — glifo 16 px à esquerda, stroke 1.5 px, mesma cor do label.
• tint — fundo derivado automaticamente do tone via token --color-functional-{tone}-tint.

Variantes

Quatro tones, cada um mapeado a um significado funcional específico. Tone não é escolha estética — é escolha semântica.

Estados

Cada tone é um estado semântico. Não há hover, focus ou disabled — o chip é decoração informativa, não elemento interativo. Se o chip precisar ser focável (filtro aplicado que pode ser removido), torna-se um Button emphasis=tertiary com ícone de fechar.

Tokens aplicáveis

Conteúdo

• Muito curto. 1 a 3 palavras — o chip não é parágrafo.
• Sem emoji no chip visual do app. Emoji aparece apenas no fallback de canais textuais (WhatsApp, SMS) quando o chip colapsa em prefixo.
• Maiúsculas caps, tracking loose — já especificado nos tokens. Não é decisão de escrita; é decisão visual do token.
• O label descreve o estado, não o sentimento. "Vencido" não "Ops!".

Acessibilidade

• aria-label composto por tone + label: "status: pago — condomínio de maio". A cor não é o único canal de significado.
• Chip é não-focável (informativo). tabIndex=-1 ou ausência de role interativo.
• Contraste: cor funcional sobre tint correspondente passa WCAG AA em xs caps.
• Fallback de canal: voz lê o tone explicitamente ("pago —"); SMS usa prefixo em caixa alta sem cor.

Do / Don't

Componentes relacionados

• Commitment Card — usa Chip como marcador de status.
• Button — quando a etiqueta precisa ser interativa (filtro que pode ser removido).

Uso

Importa o <Chip> do @peppe/design-system e passa label + tone. A prop icon é opcional — recebe SVG 16×16 alinhado a --icon-size-sm, cor herda do tone via currentColor.

import { Chip } from "@peppe/design-system";

// Chip sem ícone
<Chip label="Pago" tone="success" />

// Chip com ícone (4 tones) — passa SVG nu; o componente envelopa
// em <span className="peppe-chip__icon"> automaticamente.
<Chip
  label="Vence em 3 dias"
  tone="alert"
  icon={
    <svg
      viewBox="0 0 16 16"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
    >
      <path d="M8 2 L14 13 H2 Z" />
      <line x1="8" y1="6" x2="8" y2="9" />
      <line x1="8" y1="11" x2="8" y2="11" />
    </svg>
  }
/>

// Tones: success | info | alert | error
<Chip label="Agendado" tone="info" />
<Chip label="Vencido há 15 dias" tone="error" />

O CSS de componente viaja co-localizado com <Chip> em @peppe/design-system — não há mais componente-chip.css de página (deletado em Epic #517 S8).