Are you ready for Cyber Week Deals?

Up to 70% discount for CoreUI PRO Admin Templates and UI Components.

This year we prepared a limited Cyber Week offer for our clients and users. The first 100 people can get our products with up to 70% discount.

React Loading Button Component

Buttons with built-in loading indicators. Indicate the loading state of the button bridging the gap between action and feedback.

Other frameworks

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

Example#

1const [state, setState] = useState(false)
2const [stateO, setStateO] = useState(false)
3const [stateG, setStateG] = useState(false)
4return (
5 <>
6 <CLoadingButton loading={state} onClick={() => setState(!state)}>
7 Submit
8 </CLoadingButton>
9 <CLoadingButton variant="outline" loading={stateO} onClick={() => setStateO(!stateO)}>
10 Submit
11 </CLoadingButton>
12 <CLoadingButton variant="ghost" loading={stateG} onClick={() => setStateG(!stateG)}>
13 Submit
14 </CLoadingButton>
15 </>
16)
1<CLoadingButton timeout={2000}>Submit</CLoadingButton>
2<CLoadingButton variant="outline" timeout={2000}>
3 Submit
4</CLoadingButton>
5<CLoadingButton variant="ghost" timeout={2000}>
6 Submit
7</CLoadingButton>

Spinners#

Border (Default)#

1<CLoadingButton color="info" timeout={2000}>
2 Submit
3</CLoadingButton>
4<CLoadingButton color="success" variant="outline" timeout={2000}>
5 Submit
6</CLoadingButton>
7<CLoadingButton color="warning" variant="ghost" timeout={2000}>
8 Submit
9</CLoadingButton>

Grow#

1<CLoadingButton color="info" spinnerType="grow" timeout={2000}>
2 Submit
3</CLoadingButton>
4<CLoadingButton color="success" spinnerType="grow" variant="outline" timeout={2000}>
5 Submit
6</CLoadingButton>
7<CLoadingButton color="warning" spinnerType="grow" variant="ghost" timeout={2000}>
8 Submit
9</CLoadingButton>

API#

CLoadingButton#

1import { CLoadingButton } from '@coreui/react-pro'
2// or
3import CLoadingButton from '@coreui/react-pro/src/components/loading-button/CLoadingButton'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the base component.string-
disabledOnLoadingMakes button disabled when loading.boolean-
loadingLoading state (set to true to start animation).boolean-
spinnerTypeSets type of spinner.'border' | 'grow'border
timeoutAutomatically starts loading animation and stops after a determined amount of milliseconds.number-