# Button

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>