November 29, 2017

UIkit Button

UIkit Button UIkit provides classes to create beautiful buttons. You can create various type of buttons using predefined classes. Here in this article we are going to explain how to create UIkit buttons.

UIkit Button Example

To create a button add class .uk-button and modifier class uk-button-default.-

UIkit Button | Example:

<button class="uk-button uk-button-default">My Button</button>

Try it »

UIkit Button Example

Style Modifiers

Following style modifiers are available which we can use to create beautiful buttons.

Button	Class	Description
Default Button	.uk-button-default	Default button style.
Primary Button	.uk-button-primary	Creates Primary Button.
Secondry Button	.uk-button-secondary	Creates Secondary Button.
Danger Button	.uk-button-danger	Creates a danger button.
Text Button	.uk-button-text	Applies an alternative, typographic style.
Link Button	.uk-button-link	Creates a link button.

Example

Let us create an example to understand the above modifiers.

Button Modifiers Example:

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

Try it »

If you run the above example it will produce output something like this-

UIkit Button Example

Size Modifiers

You can use following size modifiers to change the button size.

Small Button– Class uk-button-small is used to create small button.
Large Button– Class uk-button-large is used to create large button.

Button Size Modifier Example:

<button class="uk-button uk-button-primary uk-button-small">Default Size button</button>
   
<button class="uk-button uk-button-primary uk-button-small">Small Size button</button>

<button class="uk-button uk-button-primary uk-button-large">Large Size button</button>

Try it »

If you the above example it will produce the output something like this-

Uikit Buttons Example

Width Modifiers

You can use width modifiers to create block level buttons. Add class uk-width-1-1 to make button full width.

UIkit Block Level Buttons Example:

<button class="uk-button uk-button-default uk-width-1-1 uk-margin-small-bottom">Button</button>
<button class="uk-button uk-button-primary uk-width-1-1 uk-margin-small-bottom">Button</button>
<button class="uk-button uk-button-secondary uk-width-1-1">Button</button>

Try it »

Output of above example-

UIkit Block Buttons

Button Group

Add a div wrapper with class uk-button-group to create button groups.

| Example:

<div class="uk-button-group">
    <button class="uk-button uk-button-primary">Button 1</button>
    <button class="uk-button uk-button-primary">Button 2</button>
    <button class="uk-button uk-button-primary">Button 3</button>
</div>

Try it »

UIkit Button Groups

Button with Dropdown

You can create buttons with dropdown in UIkit framework using predefined classes. Here is an example of dropdown button with nav header and nav divider.

Dropdown Button Example:

<div class="uk-inline">
    <button class="uk-button uk-button-default" type="button">My Dropdown</button>
    <div uk-dropdown>
        <ul class="uk-nav uk-dropdown-nav">
            <li class="uk-active"><a href="#">Active Item </a></li>
            <li><a href="#">Item 1</a></li>
            <li class="uk-nav-header">Header</li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href="#">Item 4</a></li>
        </ul>
    </div>
</div>

Try it »