Awesome

vue-loading-button

Straightforward Vue button with slideout loading indicator

Props

Installation

Install the package from npm by running:

$ npm i vue-loading-button

or

$ yarn add vue-loading-button

Usage

Import, register and place the component in your Vue app.

<template>
  <VueLoadingButton />
</template>

import VueLoadingButton from 'vue-loading-button'

export default {
  components: {
    VueLoadingButton,
  },
}

<p align="left"><img width="200" src="https://user-images.githubusercontent.com/38357771/63500819-712a5080-c47f-11e9-8655-7df011bbc557.gif" alt="Unstyled component example use"></p> 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.

Accessibility

Apply attributes, such as aria-label, directly on the element to apply them to the button.

<template>
  <VueLoadingButton aria-label='Send message' />
</template>

Dev

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.

Contributing

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:

1. Fork the project
2. Create your feature branch (git checkout -b new-feature-branch)
3. Commit your changes (git commit -am 'add new feature')
4. Push to the branch (git push origin new-feature-branch)
5. Submit a pull request!