Loading Button

Learn how to use loading states to provide feedback during asynchronous operations.

Default Loading

Custom Loading Spinner

Usage

Basic Loading State

function SubmitButton() {
  const [isLoading, setIsLoading] = useState(false);
 
  const handleClick = async () => {
    setIsLoading(true);
    await submitData();
    setIsLoading(false);
  };
 
  return (
    <Button 
      isLoading={isLoading} 
      onClick={handleClick}
    >
      {isLoading ? 'Submitting...' : 'Submit'}
    </Button>
  );
}

With Custom Spinner Color

<Button 
  isLoading 
  spinnerColor="success"
>
  Processing
</Button>

With Custom Spinner Component

<Button
  isLoading
  spinner={<CustomSpinner />}
>
  Loading
</Button>

Props

Prop	Type	Default	Description
`isLoading`	`boolean`	`false`	Whether the button is in a loading state
`spinner`	`ReactNode`	-	Custom spinner component
`spinnerColor`	`ButtonColor`	-	Color of the default spinner

Best Practices

User Feedback:
- Show loading state immediately
- Maintain button width during loading
- Provide clear loading text
- Consider animation duration
Accessibility:
- Maintain ARIA attributes
- Keep button disabled during loading
- Provide screen reader feedback
- Consider reduced motion
UX Considerations:
- Use appropriate loading duration
- Show progress when possible
- Consider optimistic updates
- Handle errors gracefully
Implementation:
- Manage loading state properly
- Handle component unmounting
- Clean up async operations
- Consider loading timeouts

Examples

With Form Submission

function FormButton() {
  const [isSubmitting, setIsSubmitting] = useState(false);
 
  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsSubmitting(true);
    try {
      await submitForm();
    } finally {
      setIsSubmitting(false);
    }
  };
 
  return (
    <Button
      type="submit"
      isLoading={isSubmitting}
      onClick={handleSubmit}
    >
      {isSubmitting ? 'Saving...' : 'Save Changes'}
    </Button>
  );
}

With Different Variants

<Button variant="outline" isLoading>
  Outline Loading
</Button>
 
<Button variant="ghost" isLoading>
  Ghost Loading
</Button>
 
<Button variant="light" isLoading>
  Light Loading
</Button>

With Custom Loading Text

function LoadingButton({ progress }) {
  return (
    <Button isLoading>
      Uploading... {progress}%
    </Button>
  );
}

Loading Button

On this page