Support CoreUI Development

CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.

You can support our Open Source software development in the following ways:

  • Buy the CoreUI PRO, and get access to PRO components, and dedicated support.
  • Became a sponsor, and get your logo on BACKERS.md/README.md files or each site of this documentation
  • Give us a star ⭐️ on Github.

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-