> For the complete documentation index, see [llms.txt](https://docs.navigaglobal.com/writer/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.navigaglobal.com/writer/6.4.1/api-reference/uicomponents/uiiconbutton.md).

# UIIconButton

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

### Properties

| Name     | Type       | Default     | Description                                                                                                                         |
| -------- | ---------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| icon     | `string`   |             | **Required** - Font awesome class to use as an inline icon prefixed to the button text                                              |
| 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](/writer/6.4.1/api-reference/uicomponents/uiiconbutton.md#available-types) for variations |

### 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
            }
        })
    )
}
```

## 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       |