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

\n Link\n Button\n Disabled\n

Markup

<a class="uk-button" href="">...</a>\n<button class="uk-button" type="button">...</button>\n<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.

\n Mini button\n Mini button\n

\n Small button\n Small button\n

\n Default button\n Default button\n

\n Large button\n Large button\n

Full width button

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

Example

\n Button\n Button\n

Markup

<button class="uk-button uk-width-1-1 uk-margin-small-bottom">...</button>\n<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">\n    <a class="uk-button" href="">...</a>\n    <button class="uk-button">...</button>\n    <button class="uk-button">...</button>\n</div>

JavaScript

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

Example

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>\n    <button class="uk-button">...</button>\n    <button class="uk-button">...</button>\n    <button class="uk-button">...</button>\n</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>\n    <button class="uk-button">...</button>\n    <button class="uk-button">...</button>\n    <button class="uk-button">...</button>\n</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 -->\n<div class="uk-button-dropdown" data-uk-dropdown>\n\n    <!-- This is the button toggling the dropdown -->\n    <button class="uk-button">...</button>\n\n    <!-- This is the dropdown -->\n    <div class="uk-dropdown uk-dropdown-small">\n        <ul class="uk-nav uk-nav-dropdown">\n            <li><a href="">...</a></li>\n            <li><a href="">...</a></li>\n        </ul>\n    </div>\n\n</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">\n\n    <!-- This is a button -->\n    <button class="uk-button">...</button>\n\n    <!-- This is the container enabling the JavaScript -->\n    <div data-uk-dropdown="{mode:'click'}">\n\n        <!-- This is the button toggling the dropdown -->\n        <a href="" class="uk-button">...</a>\n\n        <!-- This is the dropdown -->\n        <div class="uk-dropdown uk-dropdown-small">\n            <ul class="uk-nav uk-nav-dropdown">\n                <li><a href="">...</a></li>\n                <li><a href="">...</a></li>\n            </ul>\n        </div>\n\n    </div>\n</div>