feat: update SubmitButton component to support optional label properties and use Radix UI Button

This commit is contained in:
GW_MC
2025-12-19 19:18:33 +08:00
parent 1d1a469fe0
commit 737797f6dd

View File

@@ -1,16 +1,20 @@
import { Button, type ButtonProps } from '@radix-ui/themes';
import { LoaderCircle } from 'lucide-react';
export type SubmitButtonProps = { export type SubmitButtonProps = {
loading?: boolean; loading?: boolean;
label?: label?:
| { | {
default: string; default?: string;
loading: string; loading?: string;
} }
| string; | string;
} & React.ButtonHTMLAttributes<HTMLButtonElement>; } & React.ButtonHTMLAttributes<HTMLButtonElement> &
ButtonProps;
export function SubmitButton({ loading, label, ...props }: SubmitButtonProps) { export function SubmitButton({ loading, label, ...props }: SubmitButtonProps) {
return ( return (
<button <Button
type="submit" type="submit"
disabled={loading} disabled={loading}
style={{ style={{
@@ -18,12 +22,18 @@ export function SubmitButton({ loading, label, ...props }: SubmitButtonProps) {
borderRadius: 6, borderRadius: 6,
border: 'none', border: 'none',
backgroundColor: 'var(--iris-9)', backgroundColor: 'var(--iris-9)',
color: 'white',
}} }}
size="3"
{...props} {...props}
> >
{loading ? (typeof label === 'string' ? 'Submitting…' : label?.loading ?? 'Submitting…') : typeof label === 'string' ? label : label?.default ?? 'Submit'} {loading
</button> ? 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>
); );
} }