LoadingButton

O componente Loading Button é utilizado para exibir um botão acionável com feedback de carregamento integrado. Isso é útil para fornecer aos usuários feedback imediato sobre suas ações que requerem operações assíncronas.

Uso

Para usar o LoadingButton, importe-o junto com as props necessárias. Você pode passar loading, disabled, onClick, startIcon e outras props de botão.

LoadingButton básico

Um botão de carregamento simples mostrando o estado de carregamento e aparência padrão.

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 com ícone inicial

Um exemplo de botão de carregamento que inclui um ícone inicial exibido quando o botão não está em estado de carregamento.

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