CoreUI PRO Component

To use this component you must have a CoreUI PRO license. Buy the CoreUI PRO and get access to all PRO components, features, templates, and dedicated support.

React Loading Button Component

Loading Button

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.

Other frameworks

CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and Vue components. To learn more please visit the following pages.

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#

CLoadingButton#

import { CLoadingButton } from '@coreui/react-pro'
// or
import CLoadingButton from '@coreui/react-pro/src/components/loading-button/CLoadingButton'
PropertyDescriptionTypeDefault
activeToggle the active state for the component.boolean-
asComponent used for the root node. Either a string to use a HTML element or a component.ElementType-
classNameA string of all className you want applied to the base component.string-
colorSets the color context of the component to one of CoreUI’s themed colors.'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string-
disabledToggle the disabled state for the component.boolean-
disabledOnLoadingMakes button disabled when loading.boolean-
hrefThe href attribute specifies the URL of the page the link goes to.string-
loadingLoading state (set to true to start animation).boolean-
roleThe role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers.string-
shapeSelect the shape of the component.'rounded' | 'rounded-top' | 'rounded-end' | 'rounded-bottom' | 'rounded-start' | 'rounded-circle' | 'rounded-pill' | 'rounded-0' | 'rounded-1' | 'rounded-2' | 'rounded-3' | string-
sizeSize the component small or large.'sm' | 'lg'-
spinnerTypeSets type of spinner.'border' | 'grow'border
timeoutAutomatically starts loading animation and stops after a determined amount of milliseconds.number-
typeSpecifies the type of button. Always specify the type attribute for the <button> element.
Different browsers may use different default types for the <button> element.
'button' | 'submit' | 'reset'-
variantSet the button variant to an outlined button or a ghost button.'outline' | 'ghost'-