Button
Uso
El componente SButton es un botón versátil que soporta múltiples variantes visuales, tamaños, iconos y estados. La prop variant define la paleta de color, mientras que outline, link y circular son modificadores booleanos independientes.
Variantes
Usa la prop variant para cambiar la paleta de color del botón.
Outline
Usa la prop outline para renderizar el botón con fondo transparente, manteniendo el borde y texto del color de la variante.
Link
Usa la prop link para renderizar el botón sin fondo ni borde, manteniendo el texto del color de la variante con efecto hover.
link como outline, link tiene prioridad.Circular
Usa la prop circular para renderizar un botón redondo de solo icono.
Tamaños
Usa la prop size para cambiar el tamaño del botón.
Iconos
Usa las props leftIcon y rightIcon para agregar iconos al botón.
icon como atajo de leftIcon.Icono izquierdo
Icono derecho
Ambos iconos
Estados
Disabled
Loading
Rounded
Usa la prop rounded para controlar el borde redondeado.
Props
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
variant | 'primary' | 'secondary' | 'danger' | 'primary' | Paleta de color del botón |
outline | boolean | false | Fondo transparente con borde y texto del color de la variante |
link | boolean | false | Sin fondo ni borde, texto del color de la variante |
circular | boolean | false | Botón redondo de solo icono |
size | 'sm' | 'md' | 'lg' | 'md' | Tamaño del botón |
disabled | boolean | false | Deshabilita el botón |
loading | boolean | false | Muestra estado de carga |
icon | FunctionalComponent | - | Atajo de leftIcon |
leftIcon | FunctionalComponent | - | Icono a la izquierda del texto |
rightIcon | FunctionalComponent | - | Icono a la derecha del texto |
rounded | 'none' | 'left' | 'right' | 'both' | 'full' | 'both' | Borde redondeado |
type | 'button' | 'submit' | 'button' | Tipo HTML del botón |
as | string | Component | 'button' | Elemento a renderizar |
Slots
| Nombre | Descripción |
|---|---|
default | Contenido del botón |