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. |