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.
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.
Source Code
<button class="uk-button uk-button-default"> Button</button>
Source Code : Output
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}.
General Syntax
<button class="uk-button uk-button-default">Default Button</button>
<button class="uk-button uk-button-primary">Primary Button</button>
<button class="uk-button uk-button-secondary">Secondary Button</button>
<button class="uk-button uk-button-danger">Danger Button</button>
<button class="uk-button uk-button-text">Text Button</button>
<button class="uk-button uk-button-link">Link Button</button>
Source Code
<div class="uk-grid-column-small uk-grid-row-large uk-child-width-1-3@s uk-text-center" uk-grid>
<div>
<button class="uk-button uk-button-default">Default Button</button>
</div>
<div>
<button class="uk-button uk-button-primary">Primary Button</button>
</div>
<div>
<button class="uk-button uk-button-secondary">Secondary Button</button>
</div>
<div>
<button class="uk-button uk-button-danger">Danger Button</button>
</div>
<div>
<button class="uk-button uk-button-text">Text Button</button>
</div>
<div>
<button class="uk-button uk-button-link">Link Button</button>
</div>
</div>
Source Code : Output
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.
General Syntax
<button class="uk-button uk-button-default uk-button-small"></button>
<button class="uk-button uk-button-default uk-button-large"></button>
Source Code
<div class="uk-grid-column-small uk-grid-row-large uk-child-width-1-3@s uk-text-center" uk-grid>
<div>
<button class="uk-button uk-button-default uk-button-small">Small Button</button>
</div>
<div>
<button class="uk-button uk-button-default uk-button-large">Large Button</button>
</div>
</div>
Source Code : Output
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.
General Syntax
<button class="uk-button uk-button-default uk-width-1-1 uk-margin-small-bottom">Button</button>
Source Code
<div class="uk-grid-column-small uk-grid-row-large uk-child-width-1-3@s uk-text-center" uk-grid>
<div>
<button class="uk-button uk-button-default uk-width-1-1 uk-margin-small-bottom">Button1</button>
</div>
<div>
<button class="uk-button uk-button-primary uk-width-1-1 uk-margin-small-bottom">Button2</button>
</div>
<div>
<button class="uk-button uk-button-secondary uk-width-1-1">Button3</button>
</div>
</div>
Source Code : Output
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.
General Syntax
<div class="uk-button-group">
<button class="uk-button uk-button-default"></button>
<button class="uk-button uk-button-default"></button>
<button class="uk-button uk-button-default"></button>
</div>
Source Code
<div class="uk-button-group">
<button class="uk-button uk-button-default">Web Design</button>
<button class="uk-button uk-button-default">App Design</button>
<button class="uk-button uk-button-default">Graphics Design</button>
</div>
Source Code : Output
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.
General Syntax
<div class="uk-button-group">
<button class="uk-button uk-button-default"></button>
<div class="uk-inline">
<!-- The button toggling the dropdown -->
<button class="uk-button uk-button-default" type="button"></button>
<div uk-dropdown="mode: click; boundary: ! .uk-button-group; boundary-align: true;"></div>
</div>
</div>
Source Code
<div class="uk-button-group">
<button class="uk-button uk-button-default">SEO</button>
<div class="uk-inline">
<!-- The button toggling the dropdown -->
<button class="uk-button uk-button-default" type="button">Services</button>
<div uk-dropdown="mode: click; boundary: ! .uk-button-group; boundary-align: true;">App Design</div>
</div>
</div>
Source Code : Output
The above source code result will be: