Componentes
Chip
Action chip pill (button/anchor). Padrão para filtros, toggles, dismiss. Severidade opcional com tendência (up/down).
Default
Chip básico — pill com texto. Renderiza como <button> por padrão.
<Chip>Cardiologia</Chip>
<Chip>Neurologia</Chip>
<Chip>Pediatria</Chip>
<Chip>Cardiologia</Chip>
<Chip>Neurologia</Chip>
<Chip>Pediatria</Chip><template>
<button class="itps-chip">Cardiologia</button>
<button class="itps-chip">Neurologia</button>
<button class="itps-chip">Pediatria</button>
</template>
<template>
<button class="itps-chip">Cardiologia</button>
<button class="itps-chip">Neurologia</button>
<button class="itps-chip">Pediatria</button>
</template><>
<button className="itps-chip">Cardiologia</button>
<button className="itps-chip">Neurologia</button>
<button className="itps-chip">Pediatria</button>
</>
<>
<button className="itps-chip">Cardiologia</button>
<button className="itps-chip">Neurologia</button>
<button className="itps-chip">Pediatria</button>
</><button class="itps-chip">Cardiologia</button>
<button class="itps-chip">Neurologia</button>
<button class="itps-chip">Pediatria</button>
<button class="itps-chip">Cardiologia</button>
<button class="itps-chip">Neurologia</button>
<button class="itps-chip">Pediatria</button>Selected (filtro aplicado)
selected muda para tint coral + adiciona ícone X de dismiss à direita. Use para filtros ativos.
<Chip selected>SUS</Chip>
<Chip selected>Convênio</Chip>
<Chip>Particular</Chip>
<Chip selected>SUS</Chip>
<Chip selected>Convênio</Chip>
<Chip>Particular</Chip>Com ícones
leftIcon ou rightIcon — só renderiza rightIcon quando NÃO selecionado (X tem prioridade).
<Chip leftIcon="filter_alt">Filtros</Chip>
<Chip leftIcon="add">Adicionar</Chip>
<Chip rightIcon="expand_more">Mais opções</Chip>
<Chip leftIcon="filter_alt">Filtros</Chip>
<Chip leftIcon="add">Adicionar</Chip>
<Chip rightIcon="expand_more">Mais opções</Chip>Com severidade
severity adiciona indicador numérico/textual à direita. severityTrend adiciona seta. severityTone controla cor (positive verde, negative coral, neutral azul).
<Chip severity="12%" severityTrend="up" severityTone="positive">Crescimento</Chip>
<Chip severity="3%" severityTrend="down" severityTone="negative">Queda</Chip>
<Chip severity="estável" severityTone="neutral">Movimento</Chip>
<Chip severity="12%" severityTrend="up" severityTone="positive">Crescimento</Chip>
<Chip severity="3%" severityTrend="down" severityTone="negative">Queda</Chip>
<Chip severity="estável" severityTone="neutral">Movimento</Chip>Disabled
<Chip disabled>Indisponível</Chip>
<Chip disabled selected>Travado</Chip>
<Chip disabled>Indisponível</Chip>
<Chip disabled selected>Travado</Chip>Como link
Passa href para virar <a> (útil em filtros que mudam URL).
<Chip href="/pacientes?status=ativo" leftIcon="filter_alt">Ver ativos</Chip>
<Chip href="/pacientes?status=ativo" leftIcon="filter_alt">Ver ativos</Chip>Props
| Prop | Tipo | Default | Descrição |
|---|---|---|---|
leftIcon | string | — | Material Symbol antes do texto. |
rightIcon | string | — | Suprimido quando selected. |
severity | string | — | Texto/número de severidade à direita. |
severityTrend | 'up' | 'down' | — | Seta na severidade. |
severityTone | 'positive' | 'negative' | 'neutral' | 'neutral' | Cor da severidade. |
selected | boolean | false | Tint coral + X dismiss. |
disabled | boolean | false | Bloqueia interação. |
href | string | — | Vira <a> quando presente. |
type | 'button' | 'submit' | 'reset' | 'button' | Tipo do botão. |
ariaLabel | string | — | Label de acessibilidade. |
class | string | — | Classes adicionais. |