Vue 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 React components. To learn more please visit the following pages.

• Angular Loading Button
• Bootstrap Loading Button
• React Loading Button

Examples #

<CLoadingButton color="primary" :timeout="2000">Submit</CLoadingButton>
<CLoadingButton color="primary" :timeout="2000" variant="outline">Submit</CLoadingButton>
<CLoadingButton color="primary" :timeout="2000" variant="ghost">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/vue-pro'
// or
import CLoadingButton from '@coreui/vue-pro/src/components/loading-button/CLoadingButton'

Props #

Prop name	Description	Type	Values	Default
disabled-on-loading	Makes button disabled when loading.	boolean	-	-
loading	Loading state (set to true to start animation).	boolean	-	false
spinner-type	Sets type of spinner. @default 'border'	string	'border', 'grow'	'border'
timeout	Automatically starts loading animation and stops after a determined amount of milliseconds.	number	-	-

Events #

Event name	Description	Properties
click	Event called when the user clicks on a component.