componentes / button
Button
Todas las props nativas de <button>, más variante, color, tamaño, radio, hover y animaciones listas.
Cómo usar
Importa desde `vaiperui` y úsalo como un `<button>`: todas las props nativas (`onClick`, `disabled`, `type`, `aria-*`…) siguen funcionando. La apariencia se controla con las props `variant`, `variantColor`, `size`, `radius`, `hover` y `animation`.
preview
Button.tsx
import { Button } from "vaiperui"; <Button variantColor="primary" hover="lift"> Haz clic aquí</Button><Button variant="outlined2" variantColor="danger"> Eliminar</Button>Colores
preview
colores.tsx
<Button variantColor="primary">Botón</Button><Button variantColor="success">Botón</Button><Button variantColor="warning">Botón</Button><Button variantColor="danger">Botón</Button>Estilos
El mismo color (`primary`) en todos: lo que cambia es el relleno y el contorno.
preview
estilos.tsx
<Button variant="solid" variantColor="primary">Botón</Button><Button variant="solid-inverse" variantColor="primary">Botón</Button><Button variant="outlined" variantColor="primary">Botón</Button><Button variant="outlined2" variantColor="primary">Botón</Button><Button variant="transparent" variantColor="primary">Botón</Button>Tamaños
preview
tamanos.tsx
<Button size="sm">Botón</Button><Button size="md">Botón</Button><Button size="lg">Botón</Button>Radio
preview
radio.tsx
<Button radius="none">Botón</Button><Button radius="sm">Botón</Button><Button radius="md">Botón</Button><Button radius="lg">Botón</Button><Button radius="full">Botón</Button>Hover
`glow` usa el color de la variante en el brillo. Pasa el mouse para verlo.
preview
hover.tsx
<Button hover="none">Botón</Button><Button hover="lift">Botón</Button><Button hover="scale">Botón</Button><Button hover="glow" variantColor="primary">Botón</Button>Animaciones
Respetan `prefers-reduced-motion`.
preview
animaciones.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>Color personalizado
`customColor` sobrescribe `variantColor` con un único color, o un objeto `{ light, dark }` con un color para cada tema.
preview
custom-color.tsx
<Button customColor="#ff6600">Naranja</Button><Button customColor="#a78bfa" variant="outlined">Violeta</Button><Button customColor={{ light: "#a855f7", dark: "#f472b6" }}>Light/dark</Button>Ripple
`ripple` crea una onda desde el punto del clic. Usa el color del texto del botón.
preview
ripple.tsx
<Button ripple>Solid</Button><Button ripple variant="outlined">Outlined</Button><Button ripple variant="transparent" variantColor="success">Transparent</Button>Props
| Prop | Valores | Predeterminado | Descripción |
|---|---|---|---|
| variant | solid | solid-inverse | outlined | outlined2 | transparent | solid | solid: fondo lleno. solid-inverse: fondo lleno con hover más claro. outlined: borde suave y hover de tinte. outlined2: borde fuerte y hover que rellena. transparent: sin fondo ni borde |
| variantColor | primary | success | warning | danger | primary | Color semántico del botón |
| size | sm | md | lg | md | Altura, padding y tamaño de fuente |
| radius | none | sm | md | lg | full | md | Redondeo de los bordes |
| hover | none | lift | scale | glow | none | Efecto extra al pasar el mouse. glow usa el color de la variante |
| animation | none | float | pulse | shine | wiggle | wobble | nudge | jelly | heartbeat | jump | gradient | glow | none | Animación continua del botón; respeta prefers-reduced-motion |
| customColor | string | { light: string; dark: string } | — | Sobrescribe variantColor con cualquier color CSS (o un par claro/oscuro); hover, borde y foco derivan de él |
| ripple | boolean | false | Efecto de onda (ripple) desde el punto del clic; también se activa con el teclado. Respeta prefers-reduced-motion |
| iconStart / iconEnd | ReactNode | — | Icono/contenido antes o después del texto |
| (nativas) | ButtonHTMLAttributes<HTMLButtonElement> | — | onClick, disabled, type, aria-*, className (sobrescribe estilos), etc. |