Badge

Rótulos e tags para categorização e identificação.

Preview

Visualização do componente Badge com diferentes variantes

DefaultSecondaryDestructiveOutline

Instalação

Via CLI (Recomendado)

1. Inicializar (primeira vez)

npx @scmposs/hollow-ui init
npx @scmposs/hollow-ui setup

2. Adicionar componente

npx @scmposs/hollow-ui add badge

Os comandos init e setup fazem o pré-setup (necessário apenas uma vez). Se você rodar add sem isso, a CLI executa o setup automaticamente.

Via NPM

Instalar pacote completo

npm install @scmposs/hollow-ui@latest

Instala todos os componentes como dependência do projeto.

Uso Básico

Exemplo básico

import { Badge } from "@scmposs/hollow-ui"

<Badge variant="default">Badge</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Error</Badge>
<Badge variant="outline">Outline</Badge>

Exemplos

Variantes

PadrãoSecundárioDestrutivoContorno

Status

AtivoPendenteErroInativo

Com números

Novo (12)Em análise (5)Concluído (28)