Skip to content

Instantly share code, notes, and snippets.

@anthowave

anthowave/loading-button-example.tsx

Forked from ryanflorence/loading-button-example.tsx
Created March 4, 2021 18:56
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anthowave/c87030fc2981a54b4820e2a2dce4648b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anthowave/c87030fc2981a54b4820e2a2dce4648b 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"
}`}
/>
@anthowave
Copy link
Author

anthowave commented Mar 4, 2021

https://codesandbox.io/s/loadingbutton-reworked-121i1?file=/src/App.tsx

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