Button

Easily create nice looking buttons, which come in different styles.

Usage

To apply this component, add the .uk-button class and a modifier such as .uk-button-default to an <a> or <button> element. Add the disabled attribute to a <button> element to disable the button.

<a class="uk-button uk-button-default" href=""></a>

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

<button class="uk-button uk-button-default" disabled></button>
Copy to clipboard
  • Link

  • <p uk-margin>
      <a class="uk-button uk-button-default" href="#">Link</a>
      <button class="uk-button uk-button-default">Button</button>
      <button class="uk-button uk-button-default" disabled>Disabled</button>
    </p>

Style modifiers

There are several style modifiers available. Just add one of the following classes to apply a different look.

ClassDescription
.uk-button-defaultDefault button style.
.uk-button-ghostApplies a ghost style.
.uk-button-primaryIndicates the primary action.
.uk-button-secondaryIndicates an important action.
.uk-button-dangerIndicates a dangerous or negative action.
.uk-button-textApplies an typographic style.
.uk-button-linkApplies an plain link style.
<button class="uk-button uk-button-primary"></button>
Copy to clipboard
  • <p uk-margin>
      <button class="uk-button uk-button-default">Default</button>
      <button class="uk-button uk-button-ghost">Ghost</button>
      <button class="uk-button uk-button-primary">Primary</button>
      <button class="uk-button uk-button-secondary">Secondary</button>
      <button class="uk-button uk-button-danger">Danger</button>
      <button class="uk-button uk-button-text">Text</button>
      <button class="uk-button uk-button-link">Link</button>
    </p>

Width modifiers

Add the .uk-width-1-1 class from the Width component and the button will take up full width.

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

Or, if you are using Tailwind CSS, you can use its utility classes and the button will follow its width.

Copy to clipboard
  • <div class="flex flex-col gap-3">
      <button class="uk-button uk-button-default w-40">w-40</button>
      <button class="uk-button uk-button-primary w-44">w-44</button>
      <button class="uk-button uk-button-secondary w-48">w-48</button>
      <button class="uk-button uk-button-ghost w-52">w-52</button>
      <button class="uk-button uk-button-danger w-full">w-full</button>
    </div>

Button with dropdowns

A button can be used to trigger a dropdown menu from the Dropdown component.

<!-- A button toggling a dropdown -->
<button class="uk-button uk-button-default" type="button"></button>
<div uk-dropdown></div>
Copy to clipboard
  • <div class="uk-inline">
      <button class="uk-button uk-button-default" type="button">Dropdown</button>
      <div class="uk-dropdown" uk-dropdown>
        <ul class="uk-dropdown-nav uk-nav">
          <li class="uk-active"><a href="#">Active</a></li>
          <li><a href="#">Item</a></li>
          <li class="uk-nav-header">Header</li>
          <li><a href="#">Item</a></li>
          <li><a href="#">Item</a></li>
          <li class="uk-nav-divider"></li>
          <li><a href="#">Item</a></li>
        </ul>
      </div>
    </div>
Customize