Professional Community
Network of Professional
Become a members of a professional network and share your knowledge...
Professional Convention
Safari Park
APSEA Two-Day National Professional Convention at The Nairobi Safari Park Hotel on July 5th to 6th 2018 ...
Professional Centre
Conferencing and Meetings
The centre providing meeting rooms and conference facilities where professionals…
Professional Directory
PROFESSIONAL ASSOCIATIONS & INDIVIDUALS
Access our database here with a membership of over 50,000...
Professional Library
Access Documents
Download and upload professional material to increase you knowledge on various topics...

The Association of Professional Societies in East Africa (APSEA) is a Joint Forum and an umbrella body of professionals associations established in 1961

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

Usage

To apply this component, add the .uk-button class to an <a> or <button> element. Now you have created a button. Add the disabled attribute to a <button> element to disable the button.

Example

Link

Markup

<a class="uk-button" href="">...</a>
<button class="uk-button" type="button">...</button>
<button class="uk-button" type="button" disabled>...</button>

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 data-uk-margin attribute from the Utility component to their parent element.


Color modifiers

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

Example Class Description
.uk-button-primary Emphasizes to identify the primary action in a set of buttons.
.uk-button-success Indicates a successful or positive action.
.uk-button-danger Indicates a dangerous or negative action.
Link .uk-button-link Deemphasizes to look like a link while maintaining button behavior.

Size modifiers

Add the .uk-button-mini, .uk-button-small or .uk-button-large class to a button to make it smaller or larger.


Full width button

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

Example

Markup

<button class="uk-button uk-width-1-1 uk-margin-small-bottom">...</button>
<button class="uk-button 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 needed.

Example

Link
Link
Link
Link

Markup

<div class="uk-button-group">
    <a class="uk-button" href="">...</a>
    <button class="uk-button">...</button>
    <button class="uk-button">...</button>
</div>

JavaScript

You can toggle button states via JavaScript. Just add the data attibute data-uk-button.

Example

Markup

<button class="uk-button uk-button-primary" type="button" data-uk-button>Button</button>

Checkbox buttons

Toggle between a group of buttons like a checkbox by wrapping a <div> element with the data attribute data-uk-button-checkbox around them. This can also be applied to a button group.

Example

Markup

<div data-uk-button-checkbox>
    <button class="uk-button">...</button>
    <button class="uk-button">...</button>
    <button class="uk-button">...</button>
</div>

Radio buttons

Toggle between a group of buttons, like radio buttons, by wrapping a div element that uses data-uk-button-radio around them. This can also be applied to a button group.

Example

Markup

<div data-uk-button-radio>
    <button class="uk-button">...</button>
    <button class="uk-button">...</button>
    <button class="uk-button">...</button>
</div>

Button with dropdowns

A button can be used to trigger a dropdown menu from the Dropdown component. Just add the .uk-button-dropdown class and the data-uk-dropdown attribute to a <div> element that contains the button and the dropdown itself.

Example

Markup

<!-- This is the container enabling the JavaScript -->
<div class="uk-button-dropdown" data-uk-dropdown>

    <!-- This is the button toggling the dropdown -->
    <button class="uk-button">...</button>

    <!-- This is the dropdown -->
    <div class="uk-dropdown uk-dropdown-small">
        <ul class="uk-nav uk-nav-dropdown">
            <li><a href="">...</a></li>
            <li><a href="">...</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 a <div> element around the button and the dropdown and add the data-uk-dropdown="{mode:'click'}" attribute. Of course, a dropdown can also be applied to a button within a button group.

Example

Markup

<div class="uk-button-group">

    <!-- This is a button -->
    <button class="uk-button">...</button>

    <!-- This is the container enabling the JavaScript -->
    <div data-uk-dropdown="{mode:'click'}">

        <!-- This is the button toggling the dropdown -->
        <a href="" class="uk-button">...</a>

        <!-- This is the dropdown -->
        <div class="uk-dropdown uk-dropdown-small">
            <ul class="uk-nav uk-nav-dropdown">
                <li><a href="">...</a></li>
                <li><a href="">...</a></li>
            </ul>
        </div>

    </div>
</div>
Don't have an account yet? Register Now!

Sign in to your account