Easily create nicely looking buttons, which come in different styles.
\n\nUsage
\n\nTo 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\n\n Link\n \n \n
\n\nMarkup
\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
Color modifiers
\n\nThere are several color modifiers available. Just add one of the following classes to apply a different look.
\n\nExample | \nClass | \nDescription | \n
---|---|---|
\n | .uk-button-primary | \n Emphasizes to identify the primary action in a set of buttons. | \n
\n | .uk-button-success | \n Indicates a successful or positive action. | \n
\n | .uk-button-danger | \n Indicates a dangerous or negative action. | \n
Link | \n.uk-button-link | \n Deemphasizes to look like a link while maintaining button behavior. | \n
\n\n
Size modifiers
\n\nAdd 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
Full width button
\n\nAdd the .uk-width-1-1
class from the Grid component and the button will take up full width.
Example
\n\n\n \n \n
\n\nMarkup
\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\nTo 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
\n\nMarkup
\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\nYou can toggle button states via JavaScript. Just add the data attibute data-uk-button
.
Example
\n\n \n\nMarkup
\n\n<button class="uk-button uk-button-primary" type="button" data-uk-button>Button</button>
\n\n \n\n
Checkbox buttons
\n\nToggle 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
\n\nMarkup
\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\nToggle 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
\n\nMarkup
\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\nA 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
\n\nMarkup
\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\nUse 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
\n\nMarkup
\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>