Chip
Chips de etiqueta coloridos em três níveis de ênfase - negrito para status e deltas, sutil para valores, legenda para tags - entre sete pares de cores, além do indicador StatusDot.
Instalação
Você pode adicionar este componente de chip usando o nosso CLI ou manualmente:
Modo escuro pronto - este componente segue tokens semânticos BoardUI automaticamente. Configurar a mudança de tema.
O CLI copia a fonte do componente (com suas dependências internas) em seu projeto e instala quaisquer pacotes npm necessários.
npx boardui@latest add chipUsando um pacote de UI compartilhado ou aliases de importação personalizados? Configure seus caminhos de instalação antes de executar o CLI. Exemplos de copy-paste usam as importações padrão.
Variantes & cores
Três níveis de ênfase via variant - cada um disponível em sete pares de cores via cor.
<Chip variant="bold" color="lime">Active</Chip> {/* statuses, deltas */}<Chip variant="subtle" color="cyan">$3.252</Chip> {/* values */}<Chip variant="caption" color="rose">Designer</Chip> {/* tags */}StatusDot
A StatusDot os pares de indicadores com chips dentro de seleções e tabelas. É um item de registro separado: npx boardui add status-dot.
import { StatusDot } from "@/components/base/badges/status-dot";
<StatusDot color="green" /><StatusDot color="yellow" /><StatusDot color="indigo" />