Vuetton

Vuetton is a simple library which lets you configure your button in the most feasible way. It supports click events, asynchronous operations, icons, loaders, custom classes etc.

https://www.npmjs.com/package/vuetton

Installation via npm

npm install --save vuetton

Options

Below are the options which can be used in order to customise the button as per your needs.

Property	Type	Description
action	Function	This is a required property which accepts the reference of a function.
align-icon	String	Icon's slot can be aligned by either left or right. Default is set to left
async	Boolean	When async is true, the button will be disabled while still showing the loading icon until promise wrapped around the action is resolved.
color	String	This property determines the background-color of button.
custom-class	String	This property assigns additional custom class to the button component.
disabled	Boolean	If this property is true, then the particular button will be disabled.
loader-text	String	This property accepts text which will be loaded during an asynchronous call.
loader-image	String	This property accepts path of an image which will be loaded during an asynchronous call.
ripple		This property adds a ripple effect on clicking on the button.
size	String	This property determines the size of a button; possible values taken are lg,md, sm and xs. If not provided, default size i.e medium is rendered.
stop	Boolean	This property doesn't let the click event propogate to its parent. This works similar to how .stop modifier works in vue.
text	String	This is a required property which defines a value.
type	String	This property determines the usage of button; possible values used are submit,button reset.

Events

• Use any event directly on the component and the same will be propogated to the actual button.
• Special case in terms of :async=true - where action prop is mandatory which will be called on click event in order to show the loading animation and track the asynchronous call.

Attributes

• Attributes can be passed normally to the component and all the attributes gets copied to actual button. This is particularly useful to add accessibility attributes, id, name etc.

Usage

• Import the Vuetton component from node_modules.

import Vuetton from 'vuetton';

• Use in your template

<Vuetton size="lg" type="button" text="lg" :async="true" :action="submitData"></Vuetton>

Size variations

lg - Large md - Medium (default) sm - Small xs - Extra small

Customization via CSS

Any custom class can be attached to the button through custom-class prop

<Vuetton size="lg" type="button" text="Submit" :action="submitData" custom-class="bg--red text--white"></Vuetton>

Asynchronous support

Component supports asynchronous methods during which button would remain disabled till the function completes its execution.

Keeping the prop async="true" will make sure button remains disabled during the function provided in onclick listener.

To add the text during async call, pass the prop loader-text.

To change the default loader image, pass the prop loader-image which must be an image path.

<Vuetton size="md" text="Submit" :async="true" :action="submitData" loader-text="Submitting..."></Vuetton>

Type

You can specify the type of button via type prop be it, button, reset, submit. type="button" will be the default behaviour if not provided.

Event Listeners

You can use all the button listener events on the Vuetton component and pass on the methods.

<Vuetton size="md" text="Submit" @mouseover="doSomething" @blur="removeSomething"></Vuetton>

Slot for icon

Default slot takes elements or anything which will be rendered on the button before the button's text.

<Vuetton size="md" text="Submit" @mouseover="doSomething" @blur="removeSomething" align-icon="right">
    <i class="material-icons">save</i>
</Vuetton>

Full Example

    <Vuetton 
      text="Submit Data" 
      type="submit"
      size="sm"
      custom-class="primary" 
      :action="callApi"
      :async="true"
      loader-text="Loading..."
      loader-image="https://example.com/loader.svg"
      @mouseover="toggleOn"
      @mouseout="toggleOff"
      ripple
      id="btnSubmit"
      aria-expanded="false"
    >
      <i class="material-icons">submit</i>
    </Vuetton>

• Documentation link is coming soon