Chip — Sinapse Design System

import {
  ToggleGroup,
  ToggleGroupItem,
} from '@/components/ui/toggle-group'

export function ChipFilterExample() {
  return (
    <ToggleGroup type="multiple" defaultValue={['cardiologia']}>
      <ToggleGroupItem value="cardiologia">Cardiologia</ToggleGroupItem>
      <ToggleGroupItem value="neurologia">Neurologia</ToggleGroupItem>
      <ToggleGroupItem value="pediatria">Pediatria</ToggleGroupItem>
    </ToggleGroup>
  )
}

<script setup lang="ts">
import {
  ToggleGroup,
  ToggleGroupItem,
} from '@/components/ui/toggle-group'
</script>

<template>
  <ToggleGroup type="multiple" :default-value="['cardiologia']">
    <ToggleGroupItem value="cardiologia">Cardiologia</ToggleGroupItem>
    <ToggleGroupItem value="neurologia">Neurologia</ToggleGroupItem>
    <ToggleGroupItem value="pediatria">Pediatria</ToggleGroupItem>
  </ToggleGroup>
</template>

<div class="flex flex-wrap items-center gap-2" role="group" aria-label="Especialidades">
  <button type="button" class="itps-chip is-selected" aria-pressed="true" aria-label="Remover filtro Cardiologia">
    <span class="itps-chip__label">Cardiologia</span>
    <span class="itps-chip__separator" aria-hidden="true"></span>
    <i class="itps-chip__dismiss ti ti-x" aria-hidden="true"></i>
  </button>
  <button type="button" class="itps-chip" aria-pressed="false">
    <span class="itps-chip__label">Neurologia</span>
  </button>
  <button type="button" class="itps-chip" aria-pressed="false">
    <span class="itps-chip__label">Pediatria</span>
  </button>
</div>

Instalação

Instale Toggle Group da sua stack e rode o comando individual ITpS em seguida. O comando itps add chip é theme-only: ele valida o slug e confirma que o contrato visual vem do tema ITpS, das classes copy-first e dos snippets desta página.

terminal · React/Next

pnpm dlx shadcn@latest add toggle-group
pnpm dlx github:ITPS/sinapse-ui-cli add chip

terminal · Vue3/Nuxt4

pnpm dlx shadcn-vue@latest add toggle-group
pnpm dlx github:ITPS/sinapse-ui-cli add chip

O comando individual adapta só este componente; não instala o catálogo inteiro.

Uso

Em React/Next com shadcn/ui e Vue3/Nuxt4 com shadcn-vue, use ToggleGroup quando Chip representa filtros ou seleção rápida.

Para HTML ou wrappers finos, use itps-chip em elementos semânticos: <button> para ação/seleção e <a> somente quando houver navegação.

Exemplos

Estrutura

Peça	React/Next e Vue3/Nuxt4	HTML
Grupo	`ToggleGroup`	`role="group"` quando os chips formam um conjunto
Item	`ToggleGroupItem`	`itps-chip` em `button` ou `a`
Estado selecionado	valor do grupo	`is-selected` e `aria-pressed="true"`
Rótulo	conteúdo do item	`itps-chip__label`
Ícone	ícone decorativo no conteúdo	`itps-chip__icon` ou `itps-chip__dismiss`

Composições copy-first

Use a composição copy-first quando o chip precisa remover filtro, navegar, mostrar ícone contextual ou comunicar indisponibilidade.

Ver pacientes ativos Histórico

<div class="flex flex-wrap items-center gap-2">
  <button type="button" class="itps-chip is-selected" aria-pressed="true" aria-label="Remover filtro SUS">
    <span class="itps-chip__label">SUS</span>
    <span class="itps-chip__separator" aria-hidden="true"></span>
    <i class="itps-chip__dismiss ti ti-x" aria-hidden="true"></i>
  </button>
  <button type="button" class="itps-chip">
    <i class="itps-chip__icon ti ti-filter" aria-hidden="true"></i>
    <span class="itps-chip__label">Filtros</span>
  </button>
  <a href="/pacientes?status=ativo" class="itps-chip">
    <i class="itps-chip__icon ti ti-filter" aria-hidden="true"></i>
    <span class="itps-chip__label">Ver pacientes ativos</span>
  </a>
  <button type="button" class="itps-chip is-disabled" disabled>
    <span class="itps-chip__label">Indisponível</span>
  </button>
  <a class="itps-chip is-disabled" aria-disabled="true" tabindex="-1">
    <span class="itps-chip__label">Histórico</span>
  </a>
</div>

API copy-first

Classe/atributo	Uso
`itps-chip`	Base visual para chip compacto.
`is-selected`	Estado visual selecionado. Combine com `aria-pressed="true"`.
`is-disabled`	Estado visual indisponível. Combine com `disabled` ou `aria-disabled`.
`itps-chip__label`	Texto do chip com truncamento seguro.
`itps-chip__icon`	Ícone decorativo de contexto.
`itps-chip__separator`	Divisor antes do dismiss em chip selecionado.
`itps-chip__dismiss`	Ícone decorativo de remoção.
`aria-pressed`	Expõe seleção em chips de filtro.
`aria-label`	Nome acessível específico quando o texto visível não descreve a ação.
`aria-disabled`, `tabindex="-1"`	Mantêm links indisponíveis fora da ordem de foco.

Acessibilidade

Use <button> quando o chip executa uma ação, alterna seleção ou remove filtro. Use <a> apenas quando o destino for navegação.

Chips selecionados devem expor estado com aria-pressed; chips com dismiss implícito precisam de aria-label específico. Em botão indisponível, use disabled. Em link indisponível, remova href, exponha aria-disabled="true" e tire da ordem de foco com tabindex="-1".