LKT Button

A simple button component for Vue.js 3.0.

Installation

With npm

1npm i -S lkt-button

Typical use:

In your main.js

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

App use options:

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

In your component:

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

1export default {
2    methods: {
3      doSomething() {
4          console.log('May the force be with you');
5      },
6      disabledChecker() {
7          return false;
8      },
9      
10    }
11}

Props

type

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

Determines which kind of button will be.

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

name

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

An identifier emitted on click.

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

value

Type: String
Required: false
Default: '

Set a value for form buttons. Emitted on click.

1<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.

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

disabled

Type: Boolean
Required: false
Default: false

Determines if button is disabled or not.

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

Events

• LktButton emits these events:

  • click

HTML:

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

Slots

default slot

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

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

prev/next slot

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

1<lkt-button name="testButton" v-on:click="doSomething">
2  Click, me!
3  <template v-slot:prev>
4    <i class="font-icon"></i>
5  </template>
6  <template v-slot:next>
7    <i class="font-icon2"></i>
8  </template>
9</lkt-button>

prev-loading/next-loading slot

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

1<lkt-button name="testButton" v-on:click="doSomething">
2  Click, me!
3  <template v-slot:prev-loading>
4    <i class="font-icon"></i>
5  </template>
6  <template v-slot:next-loading>
7    <i class="font-icon2"></i>
8  </template>
9</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:

1@use "node_modules/lkt-button/lkt-button";
2
3@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.

1@use "node_modules/lkt-button/lkt-button";
2
3@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

1<lkt-button class="lkt-button--info">More info</lkt-button>
2
3<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:

1<lkt-button palette="info">More info</lkt-button>
2
3<!-- Is the same as: -->
4
5<lkt-button class="lkt-button--info">More info</lkt-button>