componentes / button
Button
Todas as props nativas de <button>, mais variante, cor, tamanho, raio, hover e animações prontas.
Como usar
Importe de `vaiperui` e use como um `<button>`: todas as props nativas (`onClick`, `disabled`, `type`, `aria-*`…) continuam funcionando. A aparência é controlada pelas props `variant`, `variantColor`, `size`, `radius`, `hover` e `animation`.
preview
Button.tsx
import { Button } from "vaiperui"; <Button variantColor="primary" hover="lift"> Clique aqui</Button><Button variant="outlined2" variantColor="danger"> Excluir</Button>Cores
preview
cores.tsx
<Button variantColor="primary">Botão</Button><Button variantColor="success">Botão</Button><Button variantColor="warning">Botão</Button><Button variantColor="danger">Botão</Button>Estilos
Mesma cor (`primary`) em todos: o que muda é o preenchimento e o contorno.
preview
estilos.tsx
<Button variant="solid" variantColor="primary">Botão</Button><Button variant="solid-inverse" variantColor="primary">Botão</Button><Button variant="outlined" variantColor="primary">Botão</Button><Button variant="outlined2" variantColor="primary">Botão</Button><Button variant="transparent" variantColor="primary">Botão</Button>Tamanhos
preview
tamanhos.tsx
<Button size="sm">Botão</Button><Button size="md">Botão</Button><Button size="lg">Botão</Button>Raio
preview
raio.tsx
<Button radius="none">Botão</Button><Button radius="sm">Botão</Button><Button radius="md">Botão</Button><Button radius="lg">Botão</Button><Button radius="full">Botão</Button>Hover
`glow` usa a cor da variante no brilho. Passe o mouse para ver.
preview
hover.tsx
<Button hover="none">Botão</Button><Button hover="lift">Botão</Button><Button hover="scale">Botão</Button><Button hover="glow" variantColor="primary">Botão</Button>Animações
Respeitam `prefers-reduced-motion`.
preview
animacoes.tsx
<Button animation="float">Float</Button><Button animation="pulse">Pulse</Button><Button animation="shine">Shine</Button><Button animation="jelly">Jelly</Button><Button animation="jump">Jump</Button><Button animation="gradient">Gradient</Button>Cor personalizada
`customColor` sobrescreve `variantColor` com uma única cor, ou um objeto `{ light, dark }` com uma cor para cada tema.
preview
custom-color.tsx
<Button customColor="#ff6600">Laranja</Button><Button customColor="#a78bfa" variant="outlined">Violeta</Button><Button customColor={{ light: "#a855f7", dark: "#f472b6" }}>Light/dark</Button>Ripple
`ripple` cria uma onda a partir do ponto do clique. Usa a cor do texto do botão.
preview
ripple.tsx
<Button ripple>Solid</Button><Button ripple variant="outlined">Outlined</Button><Button ripple variant="transparent" variantColor="success">Transparent</Button>Props
| Prop | Valores | Padrão | Descrição |
|---|---|---|---|
| variant | solid | solid-inverse | outlined | outlined2 | transparent | solid | solid: fundo cheio. solid-inverse: fundo cheio com hover mais claro. outlined: borda suave e hover de tinta. outlined2: borda forte e hover preenche. transparent: sem fundo/borda |
| variantColor | primary | success | warning | danger | primary | Cor semântica do botão |
| size | sm | md | lg | md | Altura, padding e tamanho de fonte |
| radius | none | sm | md | lg | full | md | Arredondamento das bordas |
| hover | none | lift | scale | glow | none | Efeito extra ao passar o mouse. glow usa a cor da variante |
| animation | none | float | pulse | shine | wiggle | wobble | nudge | jelly | heartbeat | jump | gradient | glow | none | Animação contínua do botão; respeita prefers-reduced-motion |
| customColor | string | { light: string; dark: string } | — | Sobrescreve variantColor com qualquer cor CSS (ou um par claro/escuro); hover, borda e foco derivam dela |
| ripple | boolean | false | Efeito de onda (ripple) a partir do ponto do clique; também dispara por teclado. Respeita prefers-reduced-motion |
| iconStart / iconEnd | ReactNode | — | Ícone/conteúdo antes ou depois do texto |
| (nativas) | ButtonHTMLAttributes<HTMLButtonElement> | — | onClick, disabled, type, aria-*, className (sobrescreve estilos) etc. |