Botón de carga (LoadingButton)

El componente Loading Button (Botón de carga) se utiliza para mostrar un botón procesable con retroalimentación de carga integrada. Esto es útil para proporcionar a los usuarios información inmediata sobre sus acciones que requieren operaciones asíncronas.

Uso

Para usar el LoadingButton, impórtalo junto con las props necesarias. Puedes pasar loading (cargando), disabled (deshabilitado), onClick (al hacer clic), startIcon (icono inicial) y otras props de botón.

Botón de carga básico

Un botón de carga simple que muestra el estado de carga y la apariencia predeterminada.

import React from "react";
import { LoadingButton } from "@firecms/ui";

export default function LoadingButtonBasicDemo() {
    const [loading, setLoading] = React.useState(false);

    const onClick = () => {
        setLoading(true);
        setTimeout(() => {
            setLoading(false);
        }, 2000);
    };

    return (
        <LoadingButton
            loading={loading}
            onClick={onClick}>
                Click Me
        </LoadingButton>
    );
}

Botón de carga con icono inicial

Un ejemplo de botón de carga que incluye un icono de inicio (start icon) que se muestra cuando el botón no está en estado de carga.

import React from "react";
import { AddIcon, LoadingButton } from "@firecms/ui";

export default function LoadingButtonWithIconDemo() {
    const [loading, setLoading] = React.useState(false);

    const onClick = () => {
        setLoading(true);
        setTimeout(() => {
            setLoading(false);
        }, 2000);
    };

    return (
        <LoadingButton
            startIcon={<AddIcon size={"small"}/>}
            loading={loading}
            onClick={onClick}>
            Click Me
        </LoadingButton>
    );
}