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

# UIButtonList

Creates a List with Buttons that accept any kind of text button types.

**Since**: 7.0.0

| Name                   | Type             | Default     | Description                                                                                                                                                                                                                                  |
| ---------------------- | ---------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| listValues             | `Array.<object>` |             | **Required** - The values that will be mapped in the list                                                                                                                                                                                    |
| listValues.label       | `string`         |             | **Required** - The label that will be listed on each button.                                                                                                                                                                                 |
| listValues.value       | `string`         |             | **Required** - The value that will be listed with each button.                                                                                                                                                                               |
| listValues.tooltipText | `string`         |             | This text is visible on each tooltip.                                                                                                                                                                                                        |
| listValues.icon        | `string`         |             | Optional if there is an icon on each of the buttons that are listed, see UIButton for instruction.                                                                                                                                           |
| listValues.selected    | `boolean`        | `false`     | Selected state or not for each button in the list.                                                                                                                                                                                           |
| type                   | `string`         | `"primary"` | Type of buttonlist look. See UIButton for variations.                                                                                                                                                                                        |
| size                   | `string`         | `"normal"`  | Size of buttonlist. See UIButton for variations.                                                                                                                                                                                             |
| width                  | `string`         | `"full"`    | Width of buttonlist. Variants: block\|full. This is the list's width, where Full is the full width of the list container and Block corresponds to the inline width of buttons in the list. The UIButton's width property can not be changed. |
| onClick                | `function`       |             | Callback for when the button is clicked.                                                                                                                                                                                                     |

### Example

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

render($$) {

    const el = $$('div')

    return el.append(
        $$(UIButtonList, {
            listValues: [
                {
                    label: 'A',
                    value: 'a',
                    tooltipText: 'Button A'
                },
                {
                    label: 'B',
                    value: 'b',
                    tooltipText: 'Button B'
                },
                {
                    label: 'C',
                    value: 'c',
                    tooltipText: 'Button C'
                }
            ],
            onClick: () => {
                // Do something
            }
        })
    )
}
```

### Example

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

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

    return el.append(
        $$(UIButtonList, {
            listValues: values,
            size: 'tiny',
            type: 'text',
            width: 'full'
        })
        .on('click', () => {
            // Do something (substance event callback style)
        })
    )
}
```