LKT Button

A simple button component for Vue.js 3.0.

Installation

With npm

npm i -S lkt-button

Typical use:

In your main.js

  import LktButton from 'lkt-button';
  
  app.use(LktButton);

App use options:

• defaultState string (default: undefined) => Set a default state for all buttons

In your component:

<lkt-button v-on:click="doSomething" v-bind:disabled="disabledChecker"></lkt-button>

export default {
    methods: {
      doSomething() {
          console.log('May the force be with you');
      },
      disabledChecker() {
          return false;
      },
      
    }
}

Props

type

Type: String Required: false Default: button Options: button, submit, reset

Determines which kind of button will be.

<lkt-button type="submit"></lkt-button>

name

Type: String Required: false Default: a random string is generated

An identifier emitted on click.

<lkt-button name="sendMessage"></lkt-button>

value

Type: String Required: false Default: '

Set a value for form buttons. Emitted on click.

<lkt-button v-bind:value="myButton"></lkt-button>

palette

Type: String Required: false Default: ''

Appends a palette classname. It's useful for palette control and styling.

<lkt-button palette="calculating"></lkt-button>

disabled

Type: Boolean Required: false Default: false

Determines if button is disabled or not.

<lkt-button disabled></lkt-button>
<lkt-button v-bind:disabled="disabledChecker"></lkt-button>

Events

• LktButton emits these events:

  • click

HTML:

<lkt-button v-on:click="doSomething"></lkt-button>

Slots

default slot

This slot allows you to fill the button with whatever you want.

<lkt-button name="testButton" v-on:click="doSomething">
  Click, me!
</lkt-button>

prev/next slot

These slots are designed to add something before/after the text, like an icon.

<lkt-button name="testButton" v-on:click="doSomething">
  Click, me!
  <template v-slot:prev>
    <i class="font-icon"></i>
  </template>
  <template v-slot:next>
    <i class="font-icon2"></i>
  </template>
</lkt-button>

prev-loading/next-loading slot

Same as prev/next but only appears if button is loading

<lkt-button name="testButton" v-on:click="doSomething">
  Click, me!
  <template v-slot:prev-loading>
    <i class="font-icon"></i>
  </template>
  <template v-slot:next-loading>
    <i class="font-icon2"></i>
  </template>
</lkt-button>

Styling

Style configuration

If you want to modify the default style without having to override styles in CSS, you can use the configurator like this:

@use "node_modules/lkt-button/lkt-button";

@include lkt-button.configure((border-width: 2px)); //opts list

Available style options

| Option | Default value | |---------------|---------------------------------------| | border-width | 1px | | border-style | solid | | border-color | #ddd | | color | #333 | | background | transparent | | height | 35px | | min-width | 150px | | padding | 7px | | slot-gap | 5px | | font-weight | 300 | | line-height | 1 | | text-align | center | | cursor | default | | box-shadow | none | | border-radius | lkt-theme.$primary-border-radius | | transition | lkt-theme.$primary-transition | | font-size | lkt-theme.$primary-button-font-size | | font-family | lkt-theme.$primary-button-font-family |

Style generation

The following example will show you how to generate styles.

@use "node_modules/lkt-button/lkt-button";

@include lkt-button.generate();

Theme modifiers

If lkt-theme is configured, the generate mixin also will generate some colored styles if colors were configured in lkt-theme.

These modifiers will be the way:

lkt-button-- lkt-button---dark lkt-button---darker lkt-button---light lkt-button---lighter

For example, if you already set up info color and info color dark, it will generate the following modifiers:

lkt-button--info lkt-button--info-dark

All lkt-theme colors can generate a modifier but disabled (which generates styles if button is disabled) and focus (which is not intended for this component).

Some example could be:

lkt-button--info lkt-button--info-dark lkt-button--info-darker lkt-button--info-light lkt-button--info-lighter

lkt-button--success lkt-button--success-dark lkt-button--success-darker lkt-button--success-light lkt-button--success-lighter

lkt-button--warning lkt-button--warning-dark lkt-button--warning-darker lkt-button--warning-light lkt-button--warning-lighter

Using CSS Selectors in HTML

<lkt-button class="lkt-button--info">More info</lkt-button>

<lkt-button class="lkt-button--success-light">Confirm action</lkt-button>

The palette prop

You can apply lkt-theme modifiers with the palette prop this way:

<lkt-button palette="info">More info</lkt-button>

<!-- Is the same as: -->

<lkt-button class="lkt-button--info">More info</lkt-button>