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

# UIButtonGroup

Create a button with a context menu button component.

**Since**: 6.4.0

### 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.5.0/api-reference/uicomponents/uibuttongroup.md#available-types) for variations |
| size                | `string`   |             | Size of button. Variants: large\|small                                                                                               |
| onClick             | `function` |             | Callback for when the button is clicked                                                                                              |
| contextIcon         | `string`   |             | Font Awesome class to use as a context icon                                                                                          |
| onContextClick      | `function` |             | Optional callback for when context part is clicked                                                                                   |
| contextIconEnabled  | `boolean`  | `true`      | (Deprecated) Use `contextIconDisabled` instead                                                                                       |
| contextIconDisabled | `boolean`  | `false`     | If context icon is disabled or not                                                                                                   |

### Example

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

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

    return el.append(
         $$(UIButtonGroup, {
             contextIcon: 'fa-plus',
             contextIconDisabled: false,
             label: Save,
             disabled: false,
             size: 'small',
             type: 'primary',
             contextClick: (evt) => {
                 // Do something
             },
             onClick: (evt) => {
                 // Do something
             }
         })
```

## Available types

The `UIButtonGroup.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    |