53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
import Done from '@mui/icons-material/Done';
|
|
import { Button, ButtonProps, CircularProgress } from '@mui/material';
|
|
import { FC } from 'react';
|
|
|
|
export interface SubmitButtonProps {
|
|
loading: boolean;
|
|
buttonText: string;
|
|
|
|
disabled?: boolean;
|
|
success?: boolean;
|
|
}
|
|
const SubmitButton: FC<ButtonProps<'button', SubmitButtonProps>> = ({
|
|
loading,
|
|
buttonText,
|
|
disabled,
|
|
success,
|
|
sx,
|
|
...props
|
|
}) => {
|
|
return (
|
|
<Button
|
|
size="large"
|
|
variant="contained"
|
|
color="accent"
|
|
type="submit"
|
|
disabled={disabled || loading || success}
|
|
sx={{
|
|
my: 4,
|
|
...(loading
|
|
? {
|
|
'&.Mui-disabled': {
|
|
backgroundColor: (theme) =>
|
|
theme.colors.accent.A500,
|
|
color: (theme) => theme.colors.text.base,
|
|
},
|
|
}
|
|
: {}),
|
|
...sx,
|
|
}}
|
|
{...props}>
|
|
{loading ? (
|
|
<CircularProgress size={20} />
|
|
) : success ? (
|
|
<Done sx={{ fontSize: 20 }} />
|
|
) : (
|
|
buttonText
|
|
)}
|
|
</Button>
|
|
);
|
|
};
|
|
|
|
export default SubmitButton;
|