LoadingButton

Il componente Loading Button è utilizzato per mostrare un pulsante azionabile con feedback di caricamento integrato. È utile per fornire agli utenti un feedback immediato sulle loro azioni che richiedono operazioni asincrone.

Utilizzo

Per usare il LoadingButton, importalo insieme alle prop necessarie. Puoi passare loading, disabled, onClick, startIcon e altre prop del pulsante.

LoadingButton di base

Un pulsante di caricamento semplice che mostra lo stato di caricamento e l’aspetto predefinito.

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>
    );
}

LoadingButton con icona iniziale

Un esempio di pulsante di caricamento che include un’icona iniziale mostrata quando il pulsante non è in stato di caricamento.

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>
    );
}