Chip
Pílula compacta para etiqueta, filtro e seleção. Sem interação é um span; com onClick ou selected vira botão; com onRemove ganha um botão de remover com rótulo próprio.
Filtros de status do envelope
ChipGroup com type="multiple". Cada chip é um botão de alternância: Tab entra no grupo e as setas andam entre os filtros.
Filtros ativos: partial
Período
Com type="single", só um chip fica ativo.
Tons e variantes
Soft para etiqueta do dia a dia, solid para destaque e outline para contexto leve.
RascunhoEnviadoEm assinaturaConcluídoAguardando vocêExpira amanhãRecusado
RascunhoEnviadoEm assinaturaConcluídoAguardando vocêExpira amanhãRecusado
RascunhoEnviadoEm assinaturaConcluídoAguardando vocêExpira amanhãRecusado
Tamanhos, forma e ícone
2 de 3 assinaturas2 de 3 assinaturas2 de 3 assinaturasICP-Brasil
Removível e selecionável
Signatários adicionados ao envelope podem ser removidos. O chip solto com selected funciona como botão de alternância.
Marina CostaRafael AndradeJuliana Prado
Props do Chip
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| tone | "neutral" | "primary" | "success" | "warning" | "caution" | "danger" | "info" | "neutral" | Cor de status. |
| variant | "soft" | "solid" | "outline" | "soft" | Peso visual. |
| size | "sm" | "md" | "lg" | "md" | 24px, form-xs ou form-sm de altura. |
| shape | "pill" | "rounded" | "pill" | Pílula ou canto base. |
| icon | ReactNode | — | Ícone antes do texto. |
| count | number | — | Contador ao fim do chip. |
| selected / onSelectedChange | boolean / (selected: boolean) => void | — | Vira botão com aria-pressed. |
| onClick | (event) => void | — | Vira botão. |
| onRemove / removeLabel | () => void / string | "Remover <texto>" | Mostra o botão de remover com o rótulo acessível. |
| disabled | boolean | — | Bloqueia os botões do chip. |
Props do ChipGroup
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| type | "single" | "multiple" | — | Seleção única ou múltipla (ToggleGroup do Radix). |
| value / defaultValue / onValueChange | string | string[] | — | Seleção controlada ou inicial. |
| tone | ChipTone | "primary" | Cor dos chips ativos. |
| size / shape | ChipSize / ChipShape | — | Aplicados a todos os itens. |
| orientation | "horizontal" | "vertical" | "horizontal" | Direção do grupo e das setas. |