Buttons

• Default
• Sizes
• Skins
• Types
• Gap
• Fonts
• Disabled

Default

Component c-btn by default looks like this:

<button class="c-btn">Button</button>
<a href="#" class="c-btn">Link</a>
<button class="c-btn" disabled>Disabled button</button>
<a href="#" class="c-btn m-disabled">Disabled link</a>
<!-- DEMO ONLY -->
<style>
    body {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        height: 100vh;
    }
</style>

Sizes

If not set, default size is large. Component c-btn comes with 4 different sizes accessible through modifier m-size-{size_name} gives the following results:

<button class="c-btn">default</button>
<button class="c-btn m-size-medium">medium</button>
<button class="c-btn m-size-small">small</button>
<button class="c-btn m-size-tiny">Tiny</button>
<!-- DEMO ONLY -->
<style>
    body {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        height: 100vh;
    }
</style>

Skins

Skin modifier is dedicated to colors and background colors. m-skin-{style_name} gives the following results:

<button class="c-btn m-skin-primary-500">primary-500</button>
<button class="c-btn m-skin-primary-500" disabled>primary-500</button><br>

<button class="c-btn m-skin-transparent">transparent</button>
<button class="c-btn m-skin-transparent" disabled>transparent</button><br>

<button class="c-btn m-skin-transparent-bordered">transparent-bordered</button>
<button class="c-btn m-skin-transparent-bordered" disabled>transparent-bordered</button><br>

<button class="c-btn m-skin-neutral-100">neutral-100</button>
<button class="c-btn m-skin-neutral-100" disabled>neutral-100</button><br>

<button class="c-btn m-skin-neutral-900">neutral-900</button>
<button class="c-btn m-skin-neutral-900" disabled>neutral-900</button><br>

<button class="c-btn m-skin-tab">tab</button>
<button class="c-btn m-skin-tab" disabled>tab</button><br>

<button class="c-btn m-skin-tab-active">tab-active</button>
<button class="c-btn m-skin-tab-active" disabled>tab-active</button><br>
<!-- DEMO ONLY -->
<style>
    body {
        padding: 1em;
    }
    button {
        margin: 0em 1em 1em 0em;
    }
</style>

Types

Type modifier adjusts how free space around and inside are managed. m-type-{type_name} gives the following results:

<button class="c-btn m-type-block">type-block</button>
<br>
<button class="c-btn m-type-block">type-block <span class="icon-arrow-right-stroke"></span></button>
<br>
<button class="c-btn m-type-block-spaced">type-block-spaced <span class="icon-arrow-right-stroke"></span></button>
<br>
<button class="c-btn m-type-block-left">type-block-left <span class="icon-arrow-right-stroke"></span></button>
<br>
<!-- DEMO ONLY -->
<style>
    body {
        padding: 1em;
    }
    button {
        margin: 0em 1em 1em 0em;
    }
</style>

Gap

When button contains another element, it is possible to quickly add space between elements inside the button. m-gap-{gap_name} gives the following results:

<button class="c-btn">button w/o gap <span class="icon-arrow-right-stroke"></span></button>
<br>
<button class="c-btn m-gap-3">button w/ gap <span class="icon-arrow-right-stroke"></span></button>
<br>
<!-- DEMO ONLY -->
<style>
    body {
        padding: 1em;
    }
    button {
        margin: 0em 1em 1em 0em;
    }
</style>

Fonts

It is possible to override default font family with the modifier m-ff-{font_family_name}

<button class="c-btn">button</button>
<button class="c-btn m-ff-lead-400">button w/ ff-lead-400</button>
<!-- DEMO ONLY -->
<style>
    body {
        padding: 1em;
    }
    button {
        margin: 0em 1em 1em 0em;
    }
</style>

Disabled

It is possible to force disabled state with the modifier m-disabled. Useful for elements that do not support disabled attribute.

<a href="#" class="c-btn">button a</a>
<br>
<a href="#" class="c-btn m-disabled">button a disabled</a>
<br>
<div class="c-btn">button div</div>
<br>
<div class="c-btn m-disabled">button div disabled</div>
<!-- DEMO ONLY -->
<style>
    body {
        padding: 1em;
    }
    button {
        margin: 0em 1em 1em 0em;
    }
</style>