Galeria de Componentes

Pré-visualize e teste os componentes do projeto

Componente Button

Tamanhos

Variantes

Estados

Cor Principal (#2294B8)

Como usar

import { Button } from '@/src/components/ui/Button';

// Uso básico
<Button>Clique aqui</Button>

// Com variantes
<Button variant="primary">Primário</Button>
<Button variant="secondary">Secundário</Button>
<Button variant="outline">Outline</Button>

// Com tamanhos
<Button size="sm">Pequeno</Button>
<Button size="md">Médio</Button>
<Button size="lg">Grande</Button>

// Com estados
<Button loading>Carregando</Button>
<Button disabled>Desabilitado</Button>

// Com evento
<Button onClick={() => console.log('Clicado!')}>
  Clique aqui
</Button>

Props disponíveis

PropTipoPadrãoDescrição
childrenReactNode-Conteúdo do botão
loadingbooleanfalseExibe spinner e desabilita o botão
variant'primary' | 'secondary' | 'outline''primary'Estilo visual do botão
size'sm' | 'md' | 'lg''md'Tamanho do botão
disabledbooleanfalseDesabilita o botão