# UIIconButton

Create a simple button, or a button with a context menu button component.

**Since**: 7.0.0 (6.2.0)

| Name     | Type       | Default     | Description                                                                                                                   |
| -------- | ---------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------- |
| icon     | `string`   |             | **Required** - Icon name from style-guide. Example `arrow-right-bold` (or (Deprecated) FontAwesome 4 icon. Example `fa-user`) |
| disabled | `boolean`  | `false`     | Set to true to disable button                                                                                                 |
| size     | `string`   | `"normal"`  | Size of buttons: large\|normal\|small\|tiny                                                                                   |
| onClick  | `function` |             | Callback for when the button is clicked                                                                                       |
| type     | `string`   | `"default"` | Type of button look. See [Available types](#available-types) for variations                                                   |
| selected | `boolean`  | `false`     | If button should be i selected state                                                                                          |

### Example

```javascript
import {UIIconButton} from 'writer'

render($$) {
    const el = $$('div')

    return el.append(
        $$(UIIconButton, {
            icon: 'pencil',
            onClick: () => {
                // Do something
            }
        })
    )
}
```

### Example

```javascript
import {UIIconButton} from 'writer'

render($$) {
    const el = $$('div')

    return el.append(
        $$(UIIconButton, {
            icon: 'bug',
            size: 'small',
            type:'primary',
            onClick: () => {
                // Do something
            }
        })
    )
}
```

## type <a href="#type" id="type"></a>

## Available types

The `UIButton.props.type` has following variations:

**Type `dark` is used on buttons on dark background**

| Name             |
| ---------------- |
| default          |
| primary          |
| negative primary |
| dark default     |
| dark black       |