UIkit Button Component
The UIkit button component is basically used to create nice-looking buttons. Although, you can create various types of buttons using additional modifier classes.
Basis Steps To Create UIkit Button
To create button, just add .uk-button class followed by .uk-button-default class to a <button> or <a> element base class.
Example
General Syntax
Try it nowSource Code
Source Code : Output
The above source code result will be:
Colored Button
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}.
Example
General Syntax
Try it nowSource Code
Source Code : Output
The above source code result will be:
UIkit Button : Size modifiers
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.
Example
General Syntax
Try it nowSource Code
Source Code : Output
The above source code result will be:
Width modifiers
To create full width button, add .uk-width-1-1 class to the <button> element base class. It will take up full available width.
Example
General Syntax
Try it nowSource Code
Source Code : Output
The above source code result will be:
UIkit 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 is needed.
Example
General Syntax
Try it nowSource Code
Source Code : Output
The above source code result will be:
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 the toggling button and the drop or dropdown inside a <div> element and add the .uk-inline class from the Utility component.
Example
General Syntax
Try it nowSource Code
Source Code : Output
The above source code result will be: