Loading Button

Button with loading state for async operations

Overview

LoadingButton extends Button with loading state support. When loading, it displays a spinner icon and automatically disables interaction to prevent duplicate submissions during async operations.

Key Features

Spinner icon replaces the button icon when loading
Automatically disabled during loading to prevent multiple clicks
Maintains button size to prevent layout shift
Supports optional loadingText to change label while loading

Examples

Basic Usage

Click the button to see the loading state. The spinner replaces the icon for 2 seconds.

Button Variants

LoadingButton inherits all Button variants. Each shows the spinner in the same position when loading.

With Loading Text

Use the loadingText prop to change the button label while loading, providing clear feedback about the ongoing action.

States

Both disabled and loading states prevent interaction. Loading also shows the spinner and cursor-wait.

Disabled

Props Reference

Prop	Type	Default	Description
`loading`	`boolean`	`false`	Whether the button is in a loading state
`icon`	`IconDefinition`	`-`	Icon to display (replaced by spinner when loading)
`loadingText`	`string`	`-`	Text to display while loading (defaults to children)
`variant`	`ButtonVariant`	`"default"`	Visual style variant (default, outline, destructive, secondary, ghost, link)
`disabled`	`boolean`	`false`	Whether the button is disabled
`...props`	`ButtonProps`	`-`	All other Button props are supported

Usage

import { LoadingButton } from '@/ui/components';
import { useState } from 'react';
import { faSave } from '@fortawesome/duotone-regular-svg-icons';

const [isLoading, setIsLoading] = useState(false);

const handleSubmit = async () => {
  setIsLoading(true);
  try {
    await apiCall();
    toast.success('Saved successfully');
  } finally {
    setIsLoading(false);
  }
};

// With icon prop (recommended)
<LoadingButton
  loading={isLoading}
  icon={faSave}
  onClick={handleSubmit}
>
  Save Changes
</LoadingButton>

// With loadingText
<LoadingButton
  loading={isLoading}
  icon={faSave}
  loadingText="Saving..."
  onClick={handleSubmit}
>
  Save Changes
</LoadingButton>

// With inline Icon child
<LoadingButton loading={isLoading} onClick={handleSubmit}>
  <Icon icon={faSave} />
  Save Changes
</LoadingButton>

Prop

Type

Default

Description

loading

boolean

false

Whether the button is in a loading state

icon

IconDefinition

-

Icon to display (replaced by spinner when loading)

loadingText

string

-

Text to display while loading (defaults to children)

variant

ButtonVariant

"default"

Visual style variant (default, outline, destructive, secondary, ghost, link)

disabled

boolean

false

Whether the button is disabled

...props

ButtonProps

-

All other Button props are supported

import { LoadingButton } from '@/ui/components'; import { useState } from 'react'; import { faSave } from '@fortawesome/duotone-regular-svg-icons'; const [isLoading, setIsLoading] = useState(false); const handleSubmit = async () => { setIsLoading(true); try { await apiCall(); toast.success('Saved successfully'); } finally { setIsLoading(false); } }; // With icon prop (recommended) <LoadingButton loading={isLoading} icon={faSave} onClick={handleSubmit} > Save Changes </LoadingButton> // With loadingText <LoadingButton loading={isLoading} icon={faSave} loadingText="Saving..." onClick={handleSubmit} > Save Changes </LoadingButton> // With inline Icon child <LoadingButton loading={isLoading} onClick={handleSubmit}> <Icon icon={faSave} /> Save Changes </LoadingButton>