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