Skip to Content
ComponentsAtomsChip

Chip

Atom

Chip representa um valor curto aplicado, selecionado ou categorizado.

Use Chip para filtros ativos, tags, categorias e pequenos atributos removíveis. O chip deve carregar texto claro e, quando removível, expor uma ação acessível.

Exemplos copiáveis

React

import * as React from "react"
 
type PulsoChipProps = {
  children: React.ReactNode
  selected?: boolean
  onRemove?: () => void
  removeLabel?: string
}
 
export function PulsoChip({
  children,
  selected = false,
  onRemove,
  removeLabel,
}: PulsoChipProps) {
  return (
    <span
      data-selected={selected || undefined}
      className={[
        "inline-flex min-h-7 items-center gap-2 rounded-full border px-3 text-xs font-medium",
        selected
          ? "border-[var(--primary)] bg-[var(--primary-soft)] text-[var(--primary)]"
          : "border-[var(--border)] bg-[var(--card)] text-[var(--fg-muted)]",
      ].join(" ")}
    >
      {children}
      {onRemove ? (
        <button
          type="button"
          aria-label={removeLabel ?? `Remover ${children}`}
          onClick={onRemove}
          className="-mr-1 grid size-5 place-items-center rounded-full text-current hover:bg-black/10 focus-visible:outline focus-visible:outline-[var(--ring-width)] focus-visible:outline-offset-1 focus-visible:outline-[var(--ring)]"
        >
          ×
        </button>
      ) : null}
    </span>
  )
}
<div className="flex flex-wrap gap-2">
  <PulsoChip selected>Risco high</PulsoChip>
  <PulsoChip onRemove={() => console.log("remove source")}>Fonte: social</PulsoChip>
  <PulsoChip>Período 7d</PulsoChip>
</div>

Quando usar

  • Filtros ativos em listas e dashboards.
  • Tags ou categorias curtas.
  • Valores removíveis abaixo de uma Filter Bar.
  • Metadados compactos em cards.

Quando não usar

  • Para botões primários ou ações de consequência.
  • Para risco operacional sem texto explícito.
  • Para mensagens longas.
  • Para status que precisa de explicação ou ícone semântico.

Regras

  1. Chip precisa ser curto e escaneável.
  2. Remoção deve ser um botão com aria-label específico.
  3. Não use apenas cor para comunicar seleção.
  4. Filtros ativos precisam continuar visíveis enquanto aplicados.
  5. Não confunda Chip com Badge: Chip é valor aplicado/selecionável; Badge é estado ou classificação.
Last updated on
CheckboxCollapsible