> 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.0.0-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`      | Set to false to disable 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.0.0-1/api-reference/uicomponents/uibutton.md#available-types) for variations |
| size           | `string`   |             | Size of button. Variants: large\|small                                                                                            |
| contextIcon    | `string`   |             | Font Awesome class to use as a context icon                                                                                       |
| onClick        | `function` |             | Callback for when the button is clicked                                                                                           |
| onContextClick | `function` |             | Optional callback for when context part 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:

**By add `-secondary` to the type you down size it automatically. Good use with a "Cancel"-button**

| Name             |
| ---------------- |
| default          |
| primary          |
| draft            |
| alert            |
| pending          |
| warning          |
| done             |
| schedule         |
| brand            |
| outline-default  |
| outline-primary  |
| outline-draft    |
| outline-alert    |
| outline-pending  |
| outline-warning  |
| outline-done     |
| outline-schedule |
| outline-brand    |