@stanfordspezi/spezi-web-design-system
Version:
Stanford Biodesign Digital Health Spezi Web Design System
53 lines (52 loc) • 1.54 kB
TypeScript
import { ComponentProps } from 'react';
import { Button } from '../Button';
export interface SaveButtonProps extends Omit<ComponentProps<typeof Button>, "children"> {
/** When true, shows a temporary success state. */
isSuccess?: boolean;
/**
* Duration in ms to keep the success state visible.
*
* @default 2000
*/
successTimeout?: number;
/** When true, shows a temporary error state. */
isError?: boolean;
/**
* Duration in ms to keep the error state visible.
*
* @default 5000
*/
errorTimeout?: number;
}
/**
* SaveButton extends Button with built-in transient success and error states.
* Provide {@link SaveButtonProps#isSuccess|isSuccess} or {@link SaveButtonProps#isSuccess|isError} to trigger the corresponding state.
*
* @example
* ```tsx
* const [isPending, setIsPending] = useState(false);
* const [success, setSuccess] = useState(false);
* const [error, setError] = useState(false);
*
* const handleSave = async () => {
* setIsPending(true);
* try {
* await saveData();
* setSuccess(true);
* } catch {
* setError(true);
* } finally {
* setIsPending(false);
* }
* };
* return (
* <SaveButton
* isPending={isPending}
* isSuccess={success}
* isError={error}
* onClick={handleSave}
* />
* );
* ```
*/
export declare const SaveButton: ({ className, isPending, disabled, isSuccess, successTimeout, isError, errorTimeout, ...props }: SaveButtonProps) => import("react").JSX.Element;