CoreUI PRO Component

To use this component you must have a CoreUI PRO license. Buy the CoreUI PRO and get access to all PRO components, features, templates, and dedicated support.

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#

const [state, setState] = useState(false)
const [stateO, setStateO] = useState(false)
const [stateG, setStateG] = useState(false)
return (
  <>
    <CLoadingButton loading={state} onClick={() => setState(!state)}>
      Submit
    </CLoadingButton>
    <CLoadingButton variant="outline" loading={stateO} onClick={() => setStateO(!stateO)}>
      Submit
    </CLoadingButton>
    <CLoadingButton variant="ghost" loading={stateG} onClick={() => setStateG(!stateG)}>
      Submit
    </CLoadingButton>
  </>
)

<CLoadingButton timeout={2000}>Submit</CLoadingButton>
<CLoadingButton variant="outline" timeout={2000}>Submit</CLoadingButton>
<CLoadingButton variant="ghost" timeout={2000}>Submit</CLoadingButton>

Spinners#

Border (Default)#

<CLoadingButton color="info" timeout={2000}>Submit</CLoadingButton>
<CLoadingButton color="success" variant="outline" timeout={2000}>Submit</CLoadingButton>
<CLoadingButton color="warning" variant="ghost" timeout={2000}>Submit</CLoadingButton>

Grow#

<CLoadingButton color="info" spinnerType="grow" timeout={2000}>Submit</CLoadingButton>
<CLoadingButton color="success" spinnerType="grow" variant="outline" timeout={2000}>Submit</CLoadingButton>
<CLoadingButton color="warning" spinnerType="grow" variant="ghost" timeout={2000}>Submit</CLoadingButton>

API#

CLoadingButton#

import { CLoadingButton } from '@coreui/react-pro'
// or
import CLoadingButton from '@coreui/react-pro/src/components/loading-button/CLoadingButton'

Property	Description	Type	Default
active	Toggle the active state for the component.	`boolean`	-
className	A string of all className you want applied to the base component.	`string`	-
color	Sets the color context of the component to one of CoreUI’s themed colors.	`'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string`	-
component	Component used for the root node. Either a string to use a HTML element or a component.	`string` \| `ComponentClass<any, any>` \| `FunctionComponent<any>`	-
disabled	Toggle the disabled state for the component.	`boolean`	-
disabledOnLoading	Makes button disabled when loading.	`boolean`	-
href	The href attribute specifies the URL of the page the link goes to.	`string`	-
loading	Loading state (set to true to start animation).	`boolean`	-
role	The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers.	`string`	-
shape	Select the shape of the component.	`'rounded'` \| `'rounded-top'` \| `'rounded-end'` \| `'rounded-bottom'` \| `'rounded-start'` \| `'rounded-circle'` \| `'rounded-pill'` \| `'rounded-0'` \| `'rounded-1'` \| `'rounded-2'` \| `'rounded-3'` \| `string`	-
size	Size the component small or large.	`'sm'` \| `'lg'`	-
spinnerType	Sets type of spinner.	`'border'` \| `'grow'`	border
timeout	Automatically starts loading animation and stops after a determined amount of milliseconds.	`number`	-
type	Specifies the type of button. Always specify the type attribute for the `<button>` element. Different browsers may use different default types for the `<button>` element.	`'button'` \| `'submit'` \| `'reset'`	-
variant	Set the button variant to an outlined button or a ghost button.	`'outline'` \| `'ghost'`	-

On this page