Button

El Button es el componente principal de interacción para desencadenar acciones directas, enviar formularios o confirmar pasos dentro de un flujo transaccional.

Previsualización Rápida

Propósito

Facilitar la ejecución de acciones claras e inequívocas en la interfaz. Orienta al usuario sobre la jerarquía del paso que está por realizar en la pantalla mediante variantes visuales y estados de avance.

Variantes y Jerarquía Visual (`variant`)

Filled - Botón de jerarquía primaria: Usá la acción filled para la acción principal de la pantalla. Debe existir idealmente un solo botón primario por vista para no confundir al usuario.
Outline - Botón de jerarquía secundaria: Usá la acción outline para ofrecer alternativas a la acción principal o cuando ninguna de sus acciones sea más importante que las demás.
Subtles - Botón de jerarquía terciaria: Usá la acción subtles para ofrecer alternativas de menor jerarquía o acciones complementarias no destructivas.
White: Úsalo cuando el fondo necesite contraste o claridad adicional (ej: sobre tarjetas con fondos oscuros o banners de color).

Colores (`color`)

Primary: El botón predeterminado es el estándar y se utiliza para transmitir una acción general. Úsalo como opción principal en la mayoría de los casos.
Destructive: Usá un estilo destructivo para acciones que tengan consecuencias irreversibles o críticas, como eliminar datos, cuentas o recursos importantes.

Tamaños (`size`)

Tamaño	Uso Sugerido	Soporte de Íconos
`2xl` / `3xl`	Se utiliza para que los usuarios avancen en un flujo transaccional principal.	Izquierda y Derecha
`lg`	Tamaño compacto. Ideal para botones de utilidad o menor jerarquía dentro de tarjetas.	Izquierda y Derecha
`md`	Utilizado en interfaces densas o dentro de tablas y herramientas en línea.	Izquierda y Derecha

Modos de Ejecución y Estado de Espera (`mode`)

Default: Botón estándar. Ejecuta la acción de forma directa sin estado de espera propio.
Loader: Para acciones que esperan respuesta de servicio y NO ejecutan movimiento de dinero (ej: validar OTP, bloquear tarjeta, guardar alias, cambiar contraseña). Durante la ejecución reemplaza la etiqueta e íconos por puntos animados.
Progress: Para acciones que SÍ ejecutan directamente un movimiento de dinero o la creación final de un instrumento financiero (ej: transferencias, constituir plazo fijo, pagar tarjeta, contratar seguro).

Guía de UX: Progress vs Loader

¿Cuándo usar cada uno?

¿La acción ejecuta directamente un movimiento de dinero o la creación final de un instrumento financiero?

SÍ $\rightarrow$ Button Progress (Transferencia, Plazo Fijo, Pagar Tarjeta, Solicitar Préstamo, Ver CVV).
NO $\rightarrow$ Button Loader (Validar OTP, Bloquear Tarjeta, Guardar Alias, Cerrar Sesión, Editar Perfil).

Comportamiento en caso de Falla o Error

En Button Progress:
- No vuelve a un estado de botón simple con label en la misma pantalla.
- Al ser una operación en curso, el error se resuelve dentro del flujo transaccional en la pantalla de resultado (ej: PreticketScreen mostrando el error).
- No existe variante “Reintentar” dentro del botón.
En Button Loader (loader=true):
- El botón vuelve a mostrar su Label original y vuelve a ser accionable.
- El usuario debe ser notificado del error mediante un componente de Notification flotante, nunca mediante cambios de label o alertas dentro del mismo botón.

Adaptabilidad en Dispositivos Móviles

En dispositivos móviles, el botón se ajusta automáticamente para ocupar el 100% del ancho disponible (full-width) para mejorar la visibilidad y facilitar la interacción táctil.
En escritorio (Desktop), el ancho se ajusta automáticamente al contenido de su etiqueta (hug label), respetando sus valores de min-width definidos por tamaño.

Pautas de Accesibilidad

Semántica HTML: Se renderiza siempre mediante un elemento semántico <button>.
Navegación por Teclado: Mantiene foco visible (Tab) e ingresa con Enter o Space.
Lectores de Pantalla: En modo loader, aplica aria-busy="true" e informa los cambios de estado dinámicamente mediante aria-live="polite". Los íconos se marcan con aria-hidden="true" al ser decorativos.