Buttons

Default Button

<button class="button">
    <span class="button-text">Buton</span>
</button>

Sizes

Small

<button class="button button-s">
    <span class="button-text">Default S</span>
</button>

Medium

<button class="button button-m">
    <span class="nutton-text">Default M</span>
</button>

Large

<button class="button button-l">
    <span class="nutton-text">Default L</span>
</button>

Button sizes example

Styles

Button styles example

Primary Button

<button class="button-primary">
    <span class="button-text">Primary Button</span>
</button>

Secondary Button

<button class="button-secondary">
    <span class="button-text">Secondary Button</span>
</button>

CTA Button

<button class="button-cta">
    <span class="button-text">CTA Button</span>
</button>

Information Button

<button class="button-info">
    <span class="button-text">Information Button</span>
</button>

Success Button

<button class="button-success">
    <span class="button-text">Success Button</span>
</button>

Warning Button

<button class="button-warning">
    <span class="button-text">Warning Button</span>
</button>

Error Button

<button class="button-error">
    <span class="button-text">Error Button</span>
</button>

Icon button

Icon Left

<button class="button-m button-primary">
    <span class="button-icon-left">
        <i class="icon your-icon"></i>
    </span>
    <span class="button-text">Button</span>
</button>

Icon Right

<button class="button-m button-primary">
    <span class="button-text">Button</span>
    <span class="button-icon-right">
        <i class="icon your-icon"></i>
    </span>
</button>

Icon button example