# Button

# Usage

// Global installation
import ButtonInstaller from "vue-elder-button";
//...
Vue.use(ButtonInstaller);

// Local installation
import { ButtonComponent } from "vue-elder-button";

//...
components: {
  ButtonComponent;
}

# Props

theme String
label String
icon String | Array
icon-placement String
loading Boolean
promise Promise
state-timeout Number
confirm Boolean
loading-label String
confirm-label String
success-label String
error-label String

# theme

Type: String
Default: default
Possible values: [primary, secondary, warning, success, error, default]

# Description

Give button a nice color

# Example

<button-component label="Primary" theme="primary"></button-component>
<button-component label="Default"></button-component>

# label

Type: String
Default: Button

# Description

Set button label

# Example

<button-component label="Fancy label"></button-component>

# icon

Type: String | Array
Default: null

# Description

Sets the icon. Icon is based on the VueFontawesome plugin.
Make sure to import your icons before referencing to them.

# Example

<button-component label="Check me" :icon="['fas', 'check']"></button-component>

# icon-placement

Type: String
Default: right
Valid values: [left, right]

# Description

Sets the icon placement.

# Example

<button-component
  label="Check me"
  icon-placement="left"
  :icon="['fas', 'check']"
></button-component>

# loading

Type: Boolean
Default: false

# Description

Activates the loading state. Be sure to check out promise prop for more advanced state handling.

# Example

<button-component loading></button-component>

# promise

Type: Promise
Default: null

# Description

Attach promises for automated state handing like loading, success and error.

# Example

<button-component :promise="yourPromise"></button-component>

# state-timeout

Type: Number
Default: 1000
Dependency: promise

# Description

The promise prop triggers different states based on the result of the promise (resolve, reject).
This prop defines how many milliseconds the different states (success, error) should be visible after the promise has been resolved/rejected before returning to the original state.

# Example

<button-component :state-timeout="4000"></button-component>

# confirm

Type: Boolean
Default: false

# Description

Add an extra click to your button for confirmation.

# Example

<button-component confirm></button-component>

# loading-label

Type: String
Default: Lagrer...
Dependency: loading | promise

# Description

Set label for loading state. Loading state is triggered by the loading or promise prop.

# Example

<button-component loading-label="Fetching..." loading></button-component>

# confirm-label

Type: String
Default: Er du sikker?
Dependency: confirm

# Description

Set label for confirmation state.
Confirm state is triggered by the confirm prop.

# Example

<button-component confirm-label="Are you crazy?" confirm></button-component>

# success-label

Type: String
Default: Fullført
Dependency: promise

# Description

Set label for success state.
Success state is triggered by the promise prop.

# Example

<button-component success-label="Well done"></button-component>

# error-label

Type: String
Default: Noe gikk galt
Dependency: promise

# Description

Set label for error state.
Error state is triggered by the promise prop.

# Example

<button-component error-label="Shit happens..."></button-component>

# click

Event trigger: click

# Description

Listen for click events.

# Example

<button-component @click="yourEvent"></button-component>

# onSuccess

Event trigger: Promise -> resolve
Dependency: promise

# Description

Triggers an event as soon as the promise has resolved.
The success event is triggered by the promise prop.

# Example

<button-component @onSuccess="yourHandler"></button-component>

# onError

Event trigger: Promise -> reject
Dependency: promise

# Description

Triggers an event as soon as the promise has rejected.
The error event is triggered by the promise prop.

# Example

<button-component @onError="yourHandler"></button-component>

← Setup Input →