Skip to content

Instantly share code, notes, and snippets.

@ryanflorence

ryanflorence/loading-button-example.tsx

Last active March 18, 2023 15:16
Show Gist options
  • Save ryanflorence/d1769b63612689fb6a60b1e908ed6877 to your computer and use it in GitHub Desktop.
Save ryanflorence/d1769b63612689fb6a60b1e908ed6877 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
loading-button-example.tsx
<LoadingButton
ariaErrorAlert={"There was an error creating your account"}
ariaLoadingAlert={
authState === AuthState.CreatingUser
? "Registering account, please wait..."
: authState === AuthState.FulfillingPurchase
? "Generating license, please wait..."
: "Loading..."
}
ariaSuccessAlert="Account created! Redirecting."
ariaText="Create Account"
disabled={!formIsValid}
icon={<IconLock className="h-5 w-5 text-blue-700" />}
iconError={<IconError className="h-5 w-5" />}
iconLoading={<BeatSpinner />}
iconSuccess={<IconCheck className="h-5 w-5" />}
state={
authState === AuthState.CreatingUser ||
authState === AuthState.FulfillingPurchase
? "loading"
: authState === AuthState.Error
? "error"
: authState === AuthState.Success
? "success"
: "idle"
}
text="Create Account"
textLoading={
authState === AuthState.CreatingUser
? "Registering..."
: authState === AuthState.FulfillingPurchase
? "Generating license..."
: "Loading..."
}
type="submit"
className={`w-full py-2 px-4 border-2 border-transparent text-sm font-medium rounded-md text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:border-yellow-500 ${
formIsValid ? "" : "opacity-50"
}`}
/>
@mcdream331
Copy link

mcdream331 commented Mar 16, 2021 •
edited

Which aria attributes I need to set with ariaLoadingAlert?

@mcdream331
Copy link

Which aria attributes I need to set with ariaLoadingAlert?

Found your codesandbox: https://codesandbox.io/s/loadingbutton-reworked-121i1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment