Straightforward Vue button with slideout loading indicator
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| loading | boolean | false | false | Controls loading indicator animation |
| styled | boolean | false | false | Enables opinionated sample styles |
Install the package from npm by running:
$ npm i vue-loading-button
or
$ yarn add vue-loading-button
Import, register and place the component in your Vue app.
<template>
<VueLoadingButton />
</template>import VueLoadingButton from 'vue-loading-button'
export default {
components: {
VueLoadingButton,
},
}Note: By default, this button component will apply minimal styles to enable you to easily add your own implementation-specific CSS. To enable the more opinionated styles seen at the top of this file, pass a `styled` prop as `true` to the button.
Apply attributes, such as aria-label, directly on the element to apply them to the button.
<template>
<VueLoadingButton aria-label='Send message' />
</template>Running example script requires @vue/cli and @vue/cli-service-global to be installed.
Install globally by running npm i --g @vue/cli @vue/cli-service-global or yarn add global vue/cli @vue/cli-service-global.
This project is open to and encourages contributions! Feel free to discuss any bug fixes/features in the issues. If you wish to work on this project:
- Fork the project
- Create your feature branch (
git checkout -b new-feature-branch) - Commit your changes (
git commit -am 'add new feature') - Push to the branch (
git push origin new-feature-branch) - Submit a pull request!