UIkit Button

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 now

Source Code

Try it now

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 now

Source Code

Try it now

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 now

Source Code

Try it now

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 now

Source Code

Try it now

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 now

Source Code

Try it now

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

App Design

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

The above source code result will be:

App Design