Button
Un componente de botón con varias variantes y tamaños, incluyendo estados de carga y estilos diferentes.
import { Button } from "stofli-ui";El componente Button se utiliza para acciones interactivas y navegación.
El botón tiene varias variantes que puedes usar para diferentes contextos.
Personaliza el tamaño del botón según tus necesidades.
Personaliza el radio de las esquinas del botón.
Los botones tienen un efecto de onda expansiva (ripple) que se activa al hacer clic.
Los botones tienen un sutil efecto de escala al hacer clic, creando una sensación táctil de presión.
Añade iconos a los botones para mejorar la experiencia visual.
Muestra un estado de carga en el botón.
Botones que ocupan todo el ancho disponible.
Muestra un estado deshabilitado para los botones.
Personaliza cualquier parte del botón usando las propiedades de className con clases de Tailwind CSS.
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
variant | "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "outline" | "ghost" | "link" | "default" | Variante visual del botón |
size | "xs" | "sm" | "md" | "lg" | "xl" | "icon" | "md" | Tamaño del botón |
radius | "none" | "sm" | "md" | "lg" | "full" | "md" | Radio de las esquinas del botón |
fullWidth | boolean | false | Si el botón ocupa todo el ancho disponible |
withRing | boolean | false | Si el botón tiene un anillo decorativo |
withRipple | boolean | true | Activa el efecto de onda expansiva al hacer clic |
rippleColor | string | - | Color personalizado para el efecto ripple |
isLoading | boolean | false | Muestra un indicador de carga |
leftIcon | ReactNode | - | Icono a mostrar a la izquierda del texto |
rightIcon | ReactNode | - | Icono a mostrar a la derecha del texto |
withArrow | boolean | false | Muestra una flecha animada a la derecha del texto |
disabled | boolean | false | Deshabilita el botón |
children | ReactNode | - | Contenido del botón |
className | string | - | Clases adicionales para personalizar el botón |
rippleClassName | string | - | Clases para el efecto ripple |
loaderClassName | string | - | Clases para el indicador de carga |
leftIconClassName | string | - | Clases para el icono izquierdo |
rightIconClassName | string | - | Clases para el icono derecho |
contentClassName | string | - | Clases para el contenido del botón |
arrowClassName | string | - | Clases para la flecha |
loadingText | string | "Cargando..." | Texto a mostrar en estado de carga |
ariaLabel | string | - | Etiqueta ARIA personalizada para el botón |