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'

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.

Code licensed MIT, docs CC BY 3.0.