LKT Button

A simple button component for Vue.js 3.0.

Installation

$3

``bash
npm i -S lkt-button
`

Typical use:


In your main.js
`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:

`html

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

}
}
`

Props

$3


Type: String

Required: false

Default: button

Options: button, submit, reset

Determines which kind of button will be.
`html

`

$3


Type: String

Required: false

Default: a random string is generated

An identifier emitted on click.
`html

`

$3


Type: String

Required: false

Default: '

Set a value for form buttons. Emitted on click.
`html

`

$3


Type: String

Required: false

Default: ''

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

`

$3


Type: Boolean

Required: false

Default: false

Determines if button is disabled or not.
`html


`




$3

* LktButton emits these events:

- click

HTML:
`HTML

`

$3

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

`html

Click, me!

`

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

`html

Click, me!



`

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

`html

Click, me!



`

Styling

$3

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

`scss
@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 |

$3

The following example will show you how to generate styles.

`scss
@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
`html
More info

Confirm action
`

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


`html
More info

More info
``