Buttons

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

Usage

To apply this component, add the .uk-button class to an <a> or <button> element. Now you have created a button. Add the disabled attribute to a <button> element to disable the button.

Example

Link Button Disabled

Markup

<a class="uk-button" href="">...</a>
<button class="uk-button" type="button">...</button>
<button class="uk-button" type="button" disabled>...</button>

NOTE If you are displaying a number of buttons in a row, you can add a top margin to them, when they stack on smaller viewports. Just add the data-uk-margin attribute from the Utility component to their parent element.

---

Color modifiers

There are several color modifiers available. Just add one of the following classes to apply a different look.

---

Size modifiers

Add the .uk-button-mini, .uk-button-small or .uk-button-large class to a button to make it smaller or larger.

Mini button Mini button

Small button Small button

Default button Default button

Large button Large button

---

Full width button

Add the .uk-width-1-1 class from the Grid component and the button will take up full width.

Example

Button Button

Markup

<button class="uk-button uk-width-1-1 uk-margin-small-bottom">...</button>
<button class="uk-button uk-width-1-1">...</button>

---

Button group

To create a button group, add the .uk-button-group class to a <div> element around the buttons. That's it! No further markup needed.

Example

Markup

<div class="uk-button-group">
    <a class="uk-button" href="">...</a>
    <button class="uk-button">...</button>
    <button class="uk-button">...</button>
</div>

---

JavaScript

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

Example

Button

Markup

<button class="uk-button uk-button-primary" type="button" data-uk-button>Button</button>

---

Checkbox buttons

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

Example

Markup

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

---

Radio buttons

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

Example

Markup

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

---

Button with dropdowns

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

Example

Markup

<!-- This is the container enabling the JavaScript -->
<div class="uk-button-dropdown" data-uk-dropdown>

    <!-- This is the button toggling the dropdown -->
    <button class="uk-button">...</button>

    <!-- This is the dropdown -->
    <div class="uk-dropdown uk-dropdown-small">
        <ul class="uk-nav uk-nav-dropdown">
            <li><a href="">...</a></li>
            <li><a href="">...</a></li>
        </ul>
    </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-uk-dropdown="{mode:'click'}" attribute. Of course, a dropdown can also be applied to a button within a button group.

Example

Markup

<div class="uk-button-group">

    <!-- This is a button -->
    <button class="uk-button">...</button>

    <!-- This is the container enabling the JavaScript -->
    <div data-uk-dropdown="{mode:'click'}">

        <!-- This is the button toggling the dropdown -->
        <a href="" class="uk-button">...</a>

        <!-- This is the dropdown -->
        <div class="uk-dropdown uk-dropdown-small">
            <ul class="uk-nav uk-nav-dropdown">
                <li><a href="">...</a></li>
                <li><a href="">...</a></li>
            </ul>
        </div>

    </div>
</div>