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