Introduction

Buttons can be created with one of several markup elements, although <button> is most appropriate. Just add the ink-button class to get the button layout and then use an utility class to give it a specific meaning.

CSS CLASSES
Class name	Description
`ink-button`	Buttons root class.
`blue` `green` `orange` `red` `black`	Defines the button theme.
`button-group`	Defines a wrapper to build a button group. Used with a `<div>` element.
`button-toolbar`	Defines a wrapper to build a button toolbar. Used with a `<div>` element.

This class must be used for the buttons to work.

<button class="ink-button">Button</button>

Example

Button

Button groups

Css classes:
ink-button
button-group

Ink also allows you to neatly group your buttons in a single line with the button-group.

<div class="button-group">
    <button class="ink-button">left</button>
    <button class="ink-button">middle</button>
    <button class="ink-button">right</button>
</div>

Example

Button toolbars

Css classes:
ink-button
button-toolbar
button-group

To build a button toolbar wrap your button groups in a <div> with the button-toolbar class as shown in the code below.

<div class="button-toolbar">
    <div class="button-group">
        <button class="ink-button"><span class="fa fa-file"></span></button>
        <button class="ink-button"><span class="fa fa-save"></span></button>
    </div>
    <div class="button-group">
        <button class="ink-button"><span class="fa fa-bold"></span></button>
        <button class="ink-button"><span class="fa fa-italic"></span></button>
        <button class="ink-button"><span class="fa fa-underline"></span></button>
    </div>
    <div class="button-group">
        <button class="ink-button"><span class="fa fa-align-left"></span></button>
        <button class="ink-button"><span class="fa fa-align-center"></span></button>
        <button class="ink-button"><span class="fa fa-align-right"></span></button>
        <button class="ink-button"><span class="fa fa-align-justify"></span></button>
    </div>
</div>

Example