Skip to content

shwilliam/vue-loading-button

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

24 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

vue-loading-button

Straightforward Vue button with slideout loading indicator

Component example use

try it on codesandbox

Props

Prop Type Required Default Description
loading boolean false false Controls loading indicator animation
styled boolean false false Enables opinionated sample styles

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,
  },
}

Unstyled component example use

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!