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>