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