Button

Easily create nicely looking buttons, which come in different styles.

JavaScript

You can toggle button states via JavaScript. Just add the data attibute data-button.

Usage

  • <button class="button button-primary" data-button>Button</button>

Checkbox buttons

Toggle between a group of buttons like a checkbox by wrapping a <div> element with the data attribute data-button-checkbox around them. This can also be applied to a button group.

Usage

  • <div class="margin">
        <div data-button-checkbox>
            <button class="button">...</button>
            <button class="button">...</button>
            <button class="button">...</button>
        </div>
    </div>

Radio buttons

Toggle between a group of buttons, like radio buttons, by wrapping a div element that uses data-button-radio around them. This can also be applied to a button group.

Usage

  • <div class="margin">
        <div data-button-radio>
            <button class="button">...</button>
            <button class="button">...</button>
            <button class="button">...</button>
        </div>
    </div>

Button with dropdowns

A button can be used to trigger a dropdown menu from the Dropdown component. Just add the .dropdown-button class and the data-dropdown attribute to a <div> element that contains the button and the dropdown itself.

Usage

  • <div class="margin" data-margin>
        <div class="dropdown-button" data-dropdown>
            <button class="button">Hover <i class="icon-chevron-down"></i>
            </button>
            <div class="dropdown dropdown-small">
                <ul class="nav nav-dropdown">
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Another item</a></li>
                    <li class="nav-header">Header</li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Another item</a></li>
                    <li class="nav-divider"></li>
                    <li><a href="#">Separated item</a></li>
                </ul>
            </div>
        </div>
        <div class="dropdown-button" data-dropdown>
            <button class="button" disabled>Disabled <i class="icon-chevron-down"></i></button>
            <div class="dropdown dropdown-small">
                <ul class="nav nav-dropdown">
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Another item</a></li>
                    <li class="nav-header">Header</li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Another item</a></li>
                    <li class="nav-divider"></li>
                    <li><a href="#">Separated item</a></li>
                </ul>
            </div>
        </div>
    </div>

Button group with dropdowns

Use button groups to split buttons into a standard action on the left and a dropdown toggle on the right. Just wrap a <div> element around the button and the dropdown and add the data-dropdown="{mode:'click'}" attribute. Of course, a dropdown can also be applied to a button within a button group.

Usage

  • <div class="margin" data-margin>
        <div class="button-group">
            <button class="button">...</button>
            <div data-dropdown="{mode:'click'}">
                <button class="button">...</button>
                <div class="dropdown dropdown-small">
                    <ul class="nav nav-dropdown">
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Another item</a></li>
                        <li class="nav-header">Header</li>
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Another item</a></li>
                        <li class="nav-divider"></li>
                        <li><a href="#">Separated item</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="button-group">
            <button class="button" disabled>Disabled</button>
            <div data-dropdown="{mode:'click'}">
                <button class="button" disabled><i class="icon-chevron-down"></i></button>
                <div class="dropdown dropdown-small">
                    <ul class="nav nav-dropdown">
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Another item</a></li>
                        <li class="nav-header">Header</li>
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Another item</a></li>
                        <li class="nav-divider"></li>
                        <li><a href="#">Separated item</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>