ConnorYoh 4c17c520d7
V2 results flow (#4196)
Better tool flow for reusability
Pinning 
Styling of tool flow
consumption of files after tooling

---------

Co-authored-by: Connor Yoh <connor@stirlingpdf.com>
Co-authored-by: James Brunton <jbrunton96@gmail.com>
2025-08-15 14:43:30 +01:00

58 lines
1.2 KiB
TypeScript

import React from 'react';
import { Button } from '@mantine/core';
import { useTranslation } from 'react-i18next';
export interface OperationButtonProps {
onClick?: () => void;
isLoading?: boolean;
disabled?: boolean;
loadingText?: string;
submitText?: string;
variant?: 'filled' | 'outline' | 'subtle';
color?: string;
fullWidth?: boolean;
mt?: string;
type?: 'button' | 'submit' | 'reset';
'data-testid'?: string;
}
const OperationButton = ({
onClick,
isLoading = false,
disabled = false,
loadingText,
submitText,
variant = 'filled',
color = 'blue',
fullWidth = false,
mt = 'md',
type = 'button',
'data-testid': dataTestId
}: OperationButtonProps) => {
const { t } = useTranslation();
return (
<Button
type={type}
onClick={onClick}
fullWidth={fullWidth}
mr='md'
ml='md'
mt={mt}
loading={isLoading}
disabled={disabled}
variant={variant}
color={color}
data-testid={dataTestId}
style={{ minHeight: '2.5rem' }}
>
{isLoading
? (loadingText || t("loading", "Loading..."))
: (submitText || t("submit", "Submit"))
}
</Button>
);
}
export default OperationButton;