The UIkit button component is basically used to create nice-looking buttons. Although, you can create various types of buttons using additional modifier classes.
To create button, just add .uk-button
class followed by .uk-button-default
class to a <button>
or <a>
element base class.
The above source code result will be:
To create colored button, add .uk-button
as well as uk-button-*
class to the <button>
element base class. Here * denotes one of from the followings: {default | primary| secondary | danger | text | link}.
The above source code result will be:
To create a smaller button, add .uk-button-small
class and to make larger buttons, add .uk-button-large
class to the <button>
element base class.
The above source code result will be:
To create full width button, add .uk-width-1-1
class to the <button>
element base class. It will take up full available width.
The above source code result will be:
To create a button group, add the .uk-button-group
class to a <div>
element around the buttons. That's it! No further markup is needed.
The above source code result will be:
Use button groups to split buttons into a standard action on the left and a dropdown toggle on the right. Just wrap the toggling button and the drop or dropdown inside a <div>
element and add the .uk-inline
class from the Utility component.
The above source code result will be: