Vue Loading Button Component

Buttons with built-in loading indicators. Indicate the loading state of the button bridging the gap between action and feedback.

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.