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'

Property	Description	Type	Default
className	A string of all className you want applied to the base component.	`string`	-
disabledOnLoading	Makes button disabled when loading.	`boolean`	-
loading	Loading state (set to true to start animation).	`boolean`	-
spinnerType	Sets type of spinner.	`'border'` \| `'grow'`	border
timeout	Automatically starts loading animation and stops after a determined amount of milliseconds.	`number`	-

On this page

CoreUI for React is Open Source UI Components Library for React.js.

CoreUI code licensed MIT, docs CC BY 3.0.CoreUI PRO requires a commercial license.

Are you ready for Cyber Week Deals?

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