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><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>
Note If you are displaying a number of buttons in a row, you can add a top margin to them, when they stack on smaller viewports. Just add the uk-margin attribute from the Margin component to their parent element.
Style modifiers
There are several style modifiers available. Just add one of the following classes to apply a different look.
| Class | Description |
|---|---|
.uk-button-default |
Default button style. |
.uk-button-primary |
Indicates the primary action. |
.uk-button-secondary |
Indicates an important action. |
.uk-button-danger |
Indicates a dangerous or negative action. |
.uk-button-text |
Applies a typographic style. |
.uk-button-link |
Applies a plain link style. |
<button class="uk-button uk-button-primary"></button>
<p uk-margin>
<button class="uk-button uk-button-default">Default</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>Size modifiers
Add the .uk-button-small or .uk-button-large class to a button to make it smaller or larger.
<button class="uk-button uk-button-default uk-button-small"></button>
<button class="uk-button uk-button-default uk-button-large"></button>
<p uk-margin>
<button class="uk-button uk-button-default uk-button-small">Small button</button>
<button class="uk-button uk-button-primary uk-button-small">Small button</button>
<button class="uk-button uk-button-secondary uk-button-small">Small button</button>
</p>
<p uk-margin>
<button class="uk-button uk-button-default uk-button-large">Large button</button>
<button class="uk-button uk-button-primary uk-button-large">Large button</button>
<button class="uk-button uk-button-secondary uk-button-large">Large button</button>
</p>Width modifiers
Add the .uk-width-1-1 class from the Width component and the button will take up full width.
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>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.
<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><div>
<div class="uk-button-group">
<button class="uk-button uk-button-secondary">Button</button>
<button class="uk-button uk-button-secondary">Button</button>
<button class="uk-button uk-button-secondary">Button</button>
</div>
</div>
<div class="uk-margin-small">
<div class="uk-button-group">
<button class="uk-button uk-button-primary">Button</button>
<button class="uk-button uk-button-primary">Button</button>
<button class="uk-button uk-button-primary">Button</button>
</div>
</div>
<div>
<div class="uk-button-group">
<button class="uk-button uk-button-danger">Button</button>
<button class="uk-button uk-button-danger">Button</button>
<button class="uk-button uk-button-danger">Button</button>
</div>
</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><div class="uk-inline">
<button class="uk-button uk-button-default" type="button">Dropdown</button>
<div uk-dropdown>
<ul class="uk-nav uk-dropdown-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>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.
<!-- A button group with a dropdown -->
<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; target: !.uk-button-group;"></div>
</div>
</div>
<div class="uk-button-group">
<button class="uk-button uk-button-default">Dropdown</button>
<div class="uk-inline">
<button class="uk-button uk-button-default" type="button" aria-label="Toggle Dropdown"><span uk-icon="icon: triangle-down"></span></button>
<div uk-dropdown="mode: click; target: !.uk-button-group;">
<ul class="uk-nav uk-dropdown-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>
</div>