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

# UIButton

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

**Since**: 7.0.0 (6.0.0)

| 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                                                                                                          |
| selected | `boolean`  | `false`                 | Selected state or not                                                                                                       |
| icon     | `string`   |                         | Icon name from style-guide. Example `arrow-right-bold` (or (Deprecated) FontAwesome 4 icon. Example `fa-user`). Prefix 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

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

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

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

### Example

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

## type

## 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          |
| text dark default     |
| text dark black       |