2024-06-07 20:17:03 +03:00
|
|
|
|
import clsx from 'clsx';
|
|
|
|
|
|
2025-02-10 01:32:16 +03:00
|
|
|
|
import { CProps } from '../props';
|
2024-06-07 20:17:03 +03:00
|
|
|
|
|
|
|
|
|
interface SubmitButtonProps extends CProps.Button {
|
2024-11-21 15:09:31 +03:00
|
|
|
|
/** Text to display in the button. */
|
2024-06-07 20:17:03 +03:00
|
|
|
|
text?: string;
|
2024-11-21 15:09:31 +03:00
|
|
|
|
|
|
|
|
|
/** Icon to display in the button. */
|
2024-06-07 20:17:03 +03:00
|
|
|
|
icon?: React.ReactNode;
|
2024-11-21 15:09:31 +03:00
|
|
|
|
|
|
|
|
|
/** Indicates that loading is in progress. */
|
|
|
|
|
loading?: boolean;
|
2024-06-07 20:17:03 +03:00
|
|
|
|
}
|
|
|
|
|
|
2024-11-21 15:09:31 +03:00
|
|
|
|
/**
|
|
|
|
|
* Displays submit type button with icon and text.
|
|
|
|
|
*/
|
2025-02-07 10:53:49 +03:00
|
|
|
|
export function SubmitButton({ text = 'ОК', icon, disabled, loading, className, ...restProps }: SubmitButtonProps) {
|
2024-06-07 20:17:03 +03:00
|
|
|
|
return (
|
|
|
|
|
<button
|
|
|
|
|
type='submit'
|
|
|
|
|
className={clsx(
|
|
|
|
|
'px-3 py-1 flex gap-2 items-center justify-center',
|
|
|
|
|
'border',
|
|
|
|
|
'font-medium',
|
2024-12-17 11:37:42 +03:00
|
|
|
|
'clr-btn-primary cc-animate-color',
|
2024-06-18 15:19:04 +03:00
|
|
|
|
'select-none disabled:cursor-auto',
|
2024-06-07 20:17:03 +03:00
|
|
|
|
loading && 'cursor-progress',
|
|
|
|
|
className
|
|
|
|
|
)}
|
2025-01-21 20:33:05 +03:00
|
|
|
|
disabled={disabled || loading}
|
2024-06-07 20:17:03 +03:00
|
|
|
|
{...restProps}
|
|
|
|
|
>
|
|
|
|
|
{icon ? <span>{icon}</span> : null}
|
|
|
|
|
{text ? <span>{text}</span> : null}
|
|
|
|
|
</button>
|
|
|
|
|
);
|
|
|
|
|
}
|