Contador
Comprimidos numéricos para contagens de navegação e totais não lidos, além da dica de atalho de teclado Kbd usada na busca rápida da barra lateral.
Instalação
Você pode adicionar este componente de contador usando nossa 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 counterUsando 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.
Cores
neutral (o padrão) assenta em superfícies leves; primary é sintonizado para as superfícies de gradiente azul como o botão primário e itens de navegação selecionados.
<Counter color="neutral">91</Counter> {/* neutral pill (default) */}<Counter color="primary">152</Counter> {/* for primary/gradient surfaces */}Kbd
A Kbd A dica de atalho compartilha o formato do contador. É um item de registro separado - adicione-o com npx boardui add kbd.
import { Kbd } from "@/components/base/kbd/kbd";
<Kbd>⌘L</Kbd><Kbd>⌘K</Kbd><Kbd>esc</Kbd>Renomeado de Badge
Counter se chamava Badge. npx boardui add badge ainda funciona: ele instala o Counter e um pequeno badge.tsx que o reexporta como Badge, então as importações existentes continuam funcionando.
// Projects that installed it as Badge keep working: badge.tsx re-exports Counterimport { Badge } from "@/components/base/badges/badge";
// New codeimport { Counter } from "@/components/base/badges/counter";