47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
import { Button, type ButtonProps } from '@radix-ui/themes';
|
|
import { LoaderCircle } from 'lucide-react';
|
|
|
|
export type SubmitButtonProps = {
|
|
loading?: boolean;
|
|
label?:
|
|
| {
|
|
default?: string;
|
|
loading?: string;
|
|
}
|
|
| string;
|
|
} & React.ButtonHTMLAttributes<HTMLButtonElement> &
|
|
ButtonProps;
|
|
|
|
export function SubmitButton({ loading, label, ...props }: SubmitButtonProps) {
|
|
return (
|
|
<Button
|
|
type="submit"
|
|
disabled={loading}
|
|
style={{
|
|
padding: '10px 14px',
|
|
borderRadius: 6,
|
|
border: 'none',
|
|
backgroundColor: 'var(--iris-9)',
|
|
}}
|
|
size="3"
|
|
{...props}
|
|
>
|
|
{loading
|
|
? typeof label === 'string'
|
|
? label
|
|
: label?.loading ?? <LoaderCircle className="animate-spin" style={{ width: 24, height: 24, marginRight: 4, verticalAlign: 'middle', color: 'white' }} />
|
|
: typeof label === 'string'
|
|
? label
|
|
: label?.default ?? 'Submit'}
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
export function ResetButton(props: React.ButtonHTMLAttributes<HTMLButtonElement>) {
|
|
return (
|
|
<button type="reset" {...props} style={{ padding: '10px 14px', borderRadius: 6, border: '1px solid var(--gray-5)', background: 'white', ...props.style }}>
|
|
{props.children ?? 'Reset'}
|
|
</button>
|
|
);
|
|
}
|