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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.navigaglobal.com/writer/8.1.1/api-reference/uicomponents/uibuttonlist.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.