React Loading Button Component

Loading Button

This component is part of CoreUI PRO – a powerful UI library with over 250 components and 25+ templates, designed to help you build modern, responsive apps faster. Fully compatible with Angular, Bootstrap, React.js, and Vue.js.

Get CoreUI PRO

React loading buttons are interactive elements that provide visual feedback to users, indicating that an action is being processed. These buttons typically display a loading spinner or animation.

Available in Other JavaScript Frameworks

CoreUI React Loading Button Component is also available for Angular, Bootstrap, and Vue. Explore framework-specific implementations below:

On this page

Example

Create basic React Loading Buttons with different styles: primary, outline, and ghost. These buttons show a loading state when clicked.

<CLoadingButton color="primary" timeout={2000}>Submit</CLoadingButton>
<CLoadingButton color="primary" variant="outline" timeout={2000}>Submit</CLoadingButton>
<CLoadingButton color="primary" variant="ghost" timeout={2000}>Submit</CLoadingButton>

Spinners

Border (Default)

The default option. Use loading buttons with a border spinner to indicate loading status.

<CLoadingButton color="info" timeout={2000}>Submit</CLoadingButton>
<CLoadingButton color="success" variant="outline" timeout={2000}>Submit</CLoadingButton>
<CLoadingButton color="warning" variant="ghost" timeout={2000}>Submit</CLoadingButton>

Grow

Switch to a grow spinner for React loading buttons by adding spinnerType="grow".

<CLoadingButton color="info" spinnerType="grow" timeout={2000}>Submit</CLoadingButton>
<CLoadingButton color="success" spinnerType="grow" variant="outline" timeout={2000}>Submit</CLoadingButton>
<CLoadingButton color="warning" spinnerType="grow" variant="ghost" timeout={2000}>Submit</CLoadingButton>

API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

<CLoadingButton />