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

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.

Example Class Description
.uk-button-primary Emphasizes to identify the primary action in a set of buttons.
.uk-button-success Indicates a successful or positive action.
.uk-button-danger Indicates a dangerous or negative action.
Link .uk-button-link Deemphasizes to look like a link while maintaining button behavior.

Size modifiers

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


Full width button

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

Example

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

Link

Link

Link

Link

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

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>