Botón loading y Toast loading

Componente de botón con indicador de carga y notificación de estado

En esta simulación los datos se envían exitosamente en el 50% de los casos, mientras que en la otra mitad ocurre un error, permitiendo observar ambos resultados posibles.

Uso

La versión base del componente se invoca así:

<BtnLoading btnLoading={btnLoading} />

Donde btnLoading es un estado que le indica al botón qué comportamiento debe tener

Ver código

Links de utilidad:

  • Sonner
    de shadcn
  • Sonner
    de sonner

Características:

  • El botón para enviar el forulario se deshabilita mientras se envía
  • Muestra un toast (un mensaje) que indica que se están enviando los datos
  • El mismo toast cambia de color y mensaje al finalizar el envío. El cambio le dirá al usuario si el envío fue exitoso o no
  • Es posible personalizar los textos del botón y de su estado deshabilitado
Desarrollado por Alejandro P