Button

Exibe um botão ou um componente que se parece com um botão.

Preview

Visualização do componente Button com diferentes configurações

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 button

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 { Button } from "@scmposs/hollow-ui"

        export default function MyComponent() {
          return <Button variant="outline">Button</Button>
        }

Exemplos

Variantes

Tamanhos

Com ícones

Button Limpar Filtros

Variação especial com efeito de reflexo para limpar filtros

Exemplo Visual

Código de Exemplo

Button Limpar Filtros

import { Button } from "@scmposs/hollow-ui"
import { FunnelX } from "lucide-react"

export default function MyComponent() {
  return (
    <Button
      variant="clearFilter"
      onClick={() => console.log('Filtros limpos!')}
      className="w-full sm:w-auto flex items-center gap-1 relative overflow-hidden group"
    >
      <FunnelX className="w-5 h-5" />
      <span className="relative z-10">Limpar</span>
      {/* Efeito de reflexo */}
      <div className="absolute inset-0 -translate-x-full group-hover:translate-x-full bg-gradient-to-r from-transparent via-white/30 to-transparent transition-transform duration-700 ease-in-out"></div>
    </Button>
  )
}