> 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/uibutton.md).

# 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](/writer/6.4.1/api-reference/uicomponents/uibutton.md#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          |