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