npm package: @moki.codes/mokui-button
Description: button web ui component
Author: Kirill Morozov
Latest version: 0.2.3

button
--------------------------------------------------------------------------------


Description
--------------------------------------------------------------------------------
Button component

Installation
--------------------------------------------------------------------------------
```
yarn add @moki.codes/mokui-button
```

Styles
--------------------------------------------------------------------------------
```
@import "@moki.codes/mokui-button/dist/mokui-theme.css"
@import "@moki.codes/mokui-button/dist/mokui-animation.css"
@import "@moki.codes/mokui-button/dist/mokui-elevation.css"
@import "@moki.codes/mokui-list/dist/mokui-text.css"
@import "@moki.codes/mokui-button/dist/mokui-button.css"
```

Basic Usage
--------------------------------------------------------------------------------
```
<!-- raised button, light primary color -->
<button class="button button_type_raised button_color_primary-light button_size_m
               text text_style_small-caps text_align_center text_size_xs text_weight_regular">
        <!-- In case of the raised button, resting elevation element -->
        <span class=elevation elevation_depth_2 button__elevation"></span>
        button
</button>

<!-- raised button, primary color -->
<button class="button button_type_raised button_color_primary button_size_m
               text text_style_small-caps text_align_center text_size_xs text_weight_regular">
        <!-- In case of the raised button, resting elevation element -->
        <span class=elevation elevation_depth_2 button__elevation"></span>
        button
</button>

<!-- raised button, dark primary color -->
<button class="button button_type_raised button_color_primary-dark button_size_m
               text text_style_small-caps text_align_center text_size_xs text_weight_regular">
        <!-- In case of the raised button, resting elevation element -->
        <span class=elevation elevation_depth_2 button__elevation"></span>
        button
</button>

<!-- ghost button, light primary color -->
<button class="text text_style_small-caps text_align_center
               text_size_xs text_weight_regular
               button button_type_ghost button_color_primary-light
               button_size_m">
        button
</button>

<!-- ghost button, primary color -->
<button class="text text_style_small-caps text_align_center
               text_size_xs text_weight_regular
               button button_type_ghost button_color_primary
               button_size_m">
        button
</button>

<!-- ghost button, dark primary color -->
<button class="text text_style_small-caps text_align_center
               text_size_xs text_weight_regular
               button button_type_ghost button_color_primary-dark
               button_size_m">
        button
</button>

<!-- raised button, dark primary color, disabled -->
<button class="text text_style_small-caps text_align_center
               text_size_xs text_weight_regular
               button button_type_raised button_color_primary-dark button_disabled
               button_size_m">
        <span
          class="elevation elevation_depth_2 button__elevation"
        ></span>
        button
</button>
```

Modificators
--------------------------------------------------------------------------------
| name              | value             | description                          |
| ----------------- | ----------------- | ------------------------------------ |
| type              | raised, ghost     | specifies type of the button         |
| color             | primary-light,    | sets primary-light color theme       |
|                   | primary,          | sets primary color theme             |
|                   | primary-dark      | sets primary dark color theme        |
| size              | s                 | sets vertical spacing to 1/4*--msp-1 |
|                   | m,                | sets vertical spacing to 1/2*--msp-1 |
|                   | l                 | sets vertical spacing to --msp-1     |

Elements
--------------------------------------------------------------------------------
* elevation
  - resting elevation for the raised button

elevation
--------------------------------------------------------------------------------
resting elevation for the raised button