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

\n\n

Usage

\n\n

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.

\n\n

Example

\n\n

\n Link\n \n \n

\n\n

Markup

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

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.

\n\n
\n\n

Color modifiers

\n\n

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

\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
ExampleClassDescription
.uk-button-primaryEmphasizes to identify the primary action in a set of buttons.
.uk-button-successIndicates a successful or positive action.
.uk-button-dangerIndicates a dangerous or negative action.
Link.uk-button-linkDeemphasizes to look like a link while maintaining button behavior.
\n
\n\n
\n\n

Size modifiers

\n\n

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

\n\n

\n \n \n

\n\n

\n \n \n

\n\n

\n \n \n

\n\n

\n \n \n

\n\n
\n\n

Full width button

\n\n

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

\n\n

Example

\n\n

\n \n \n

\n\n

Markup

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

Button group

\n\n

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.

\n\n

Example

\n\n
\n
\n Link\n \n \n
\n
\n\n
\n
\n Link\n \n \n
\n
\n\n
\n
\n Link\n \n \n
\n
\n\n
\n
\n Link\n \n \n
\n
\n\n

Markup

\n\n
<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>
\n\n
\n\n

JavaScript

\n\n

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

\n\n

Example

\n\n \n\n

Markup

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

Checkbox buttons

\n\n

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.

\n\n

Example

\n\n
\n
\n \n \n \n
\n
\n
\n
\n \n \n \n
\n
\n\n

Markup

\n\n
<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>
\n\n
\n\n

Radio buttons

\n\n

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.

\n\n

Example

\n\n
\n
\n \n \n \n
\n
\n
\n
\n \n \n \n
\n
\n\n

Markup

\n\n
<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>
\n\n
\n\n

Button with dropdowns

\n\n

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.

\n\n

Example

\n\n
\n\n
\n \n
\n \n
\n
\n\n
\n \n
\n \n
\n
\n\n
\n \n
\n \n
\n
\n\n
\n \n
\n \n
\n
\n\n
\n \n
\n \n
\n
\n\n
\n\n

Markup

\n\n
<!-- 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>
\n\n
\n\n

Button group with dropdowns

\n\n

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.

\n\n

Example

\n\n
\n
\n \n
\n \n
\n \n
\n
\n
\n\n
\n \n
\n \n
\n \n
\n
\n
\n\n
\n \n
\n \n
\n \n
\n
\n
\n\n
\n \n
\n \n
\n \n
\n
\n
\n\n
\n \n
\n \n
\n \n
\n
\n
\n
\n\n

Markup

\n\n
<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>