# UIButton

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

### Properties

| Name     | Type       | Default     | Description                                                                 |
| -------- | ---------- | ----------- | --------------------------------------------------------------------------- |
| label    | `string`   |             | **Required** - The text of the label                                        |
| enabled  | `boolean`  | `true`      | (Deprecated) Use `disabled` instead                                         |
| disabled | `boolean`  | `false`     | To disabled button                                                          |
| icon     | `string`   |             | Font awesome class to use as an inline icon prefixed to the button text     |
| type     | `string`   | `"primary"` | Type of button look. See [Available types](#available-types) for variations |
| size     | `string`   | `"normal"`  | Size of button. Variants: large\|normal\|small                              |
| width    | `string`   |             | Width of button. Variants: block\|full                                      |
| onClick  | `function` |             | Callback for when the button is clicked                                     |

### Example

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

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

    return el.append(
        $$(UIButton, {
            label: this.getLabel('My button'),
            onClick: () => {
                // Do something
            }
        })
    )
}
```

### Example

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

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

    return el.append(
        $$(UIButton, {
            label: this.getLabel('My button'),
            size: 'small',
            type: 'done'
        })
        .on('click', () => {
            // Do something (substance event callback style)
        })
    )
}
```

## Available types

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

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

| Name                  |
| --------------------- |
| default               |
| secondary             |
| primary               |
| draft                 |
| alert                 |
| pending               |
| warning               |
| done                  |
| schedule              |
| brand                 |
| alert outlined        |
| dark default          |
| dark primary          |
| dark outlined         |
| dark negative primary |
| dark secondary        |
| text default          |
| text primary          |