Framework:
DownloadGet CoreUI PRO

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-
On this page

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

Code licensed MIT, docs CC BY 3.0.