UIkit Button

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

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

Try it now

Source Code

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

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

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

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>

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

      <button class="uk-button uk-button-default uk-button-small"></button>
<button class="uk-button uk-button-default uk-button-large"></button>

Try it now

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>

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

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

Try it now

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>

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

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

Try it now

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>

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

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

Try it now

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>

Try it now

Source Code : Output

The above source code result will be:

App Design

UIkit Button

Basis Steps To Create UIkit Button

Example

Colored Button

Example

UIkit Button : Size modifiers

Example

Width Modifiers

Example

UIkit Button Group

Example

Button Group With Dropdowns

Example

Web Tutorials