> 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.3.3/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.3.3/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 adding `secondary` to the type you down size it automatically. Good use with a "Cancel"-button**

**Type `dark-mode` should be added if button is on dark background**

| Name                         |
| ---------------------------- |
| default                      |
| primary                      |
| draft                        |
| alert                        |
| pending                      |
| warning                      |
| done                         |
| schedule                     |
| brand                        |
| default outlined             |
| default outlined transparent |
| primary inverted             |
| draft inverted               |
| alert inverted               |
| pending inverted             |
| warning inverted             |
| done inverted                |
| schedule inverted            |
| brand inverted               |
| black inverted               |