React Loading Button Component

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

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-