> For the complete documentation index, see [llms.txt](https://help.mimeeq.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.mimeeq.com/configurator/options-and-widgets/button-widget.md).

# Button Widget

Add clickable buttons that reset options, guide customers step by step or fire JavaScript events. Learn how to add and style the Button widget.

The Button widget adds clickable buttons to your configurator that trigger rules when pressed. Common uses include resetting selected options, navigating between groups and firing JavaScript events for website integration.

***

## How to add a Button widget

1. Open your configurator and go to the **Options** tab.
2. Click **New Option** and select **Button** as the mode.
3. Configure the button settings and save.

***

## Button configuration settings

<table><thead><tr><th width="59.453125">#</th><th>Setting</th><th>Options</th><th>Description</th></tr></thead><tbody><tr><td>1</td><td><strong>Name</strong></td><td>Text input</td><td>The label displayed on the button.</td></tr><tr><td>2</td><td><strong>Button Width</strong></td><td>Full Width, Half Width</td><td><strong>Full Width</strong> spans the entire container. <strong>Half Width</strong> takes 50% — add two half-width buttons to the same group for a side-by-side layout.</td></tr><tr><td>3</td><td><strong>Button Size</strong></td><td>Small, Medium</td><td>Controls the button's overall size.</td></tr><tr><td>4</td><td><strong>Text Case</strong></td><td>Normal, Uppercase</td><td>Sets the capitalisation of the button label.</td></tr><tr><td>5</td><td><strong>Button Variant</strong></td><td>Filled, Outlined, Text</td><td><strong>Filled:</strong> solid background. <strong>Outlined:</strong> border only. <strong>Text:</strong> no border or background.</td></tr><tr><td>6</td><td><strong>Button Shape</strong></td><td>Pill, Rectangle, Rounded</td><td>Controls the corner style of the button.</td></tr><tr><td>7</td><td><strong>Button Colour</strong></td><td>Accent, Accent Light, Gray, Custom</td><td>Uses your theme colours, or define custom colours when <strong>Custom</strong> is selected.</td></tr><tr><td>8</td><td><strong>Default Button Background</strong></td><td>Colour picker</td><td>Background colour in the normal state. Available when <strong>Custom</strong> is selected.</td></tr><tr><td>9</td><td><strong>Hover Button Background</strong></td><td>Colour picker</td><td>Background colour on hover. Available when <strong>Custom</strong> is selected.</td></tr><tr><td>10</td><td><strong>Default Text Colour</strong></td><td>Colour picker</td><td>Text colour in the normal state. Available when <strong>Custom</strong> is selected.</td></tr><tr><td>11</td><td><strong>Hover Text Colour</strong></td><td>Colour picker</td><td>Text colour on hover. Available when <strong>Custom</strong> is selected.</td></tr><tr><td>12</td><td><strong>Event Name</strong></td><td>Text input</td><td>Optional custom event name for JavaScript integration.</td></tr><tr><td>13</td><td><strong>Button Preview</strong></td><td>—</td><td>Live preview of the button.</td></tr></tbody></table>

![Button widget settings panel with width, size, variant, shape and colour options and a live preview](https://621103948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsqWfi8ifBhTdkvf1vOlY%2Fuploads%2FZQBbhexIG96y4zgbZhpP%2Fbutton-article_1gya0h3.webp?alt=media)

***

## Examples

### Reset button

Create a button that clears selected options within a group:

1. Add a Button widget named **Reset Design Cover** to the relevant group.
2. Configure a rule to reset the group's options when the button is clicked.
3. The button hides automatically when there are no selections to reset.

{% embed url="<https://codepen.io/mimeeq/embed/raeGaaQ/3bfb72b82e462db7346184365a12b67d?default-tab=result>" %}
Demo — Reset button
{% endembed %}

### Step-by-step navigation

Guide users through a configurator with **Next** and **Previous** buttons:

1. Add a **Next** and **Previous** button at the end of each group.
2. Configure each button to open the next or previous group when clicked.
3. Optionally, add a rule to rename the current group after navigation.

{% embed url="<https://codepen.io/mimeeq/embed/KwzXRdZ/8dfb7523aede1d262abf6d4665290488?default-tab=result>" %}
Demo — Step-by-step navigation
{% endembed %}

***

## Troubleshooting

* **Button not appearing:** check that the widget is added to a group and that the width setting suits your layout.
* **Half-width buttons not aligning:** make sure you have exactly two half-width buttons in the same group with matching size settings.
* **Custom colours not applying:** confirm **Custom** is selected in the colour dropdown and all four colour fields are filled with valid values.

***

## Related articles

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Hiding Options</strong></td><td>Control which options appear in the option panel and specifications.</td><td><a href="/configurator/options-and-widgets/hiding-options.md">Hiding Options</a></td></tr><tr><td><strong>Thumbnail Widget</strong></td><td>Display option sets as a visual grid of swatches or images.</td><td><a href="/configurator/options-and-widgets/thumbnail-widget.md">Thumbnail Widget</a></td></tr><tr><td><strong>Colour Picker Widget</strong></td><td>Let customers pick any colour or choose from presets.</td><td><a href="/configurator/options-and-widgets/colour-picker-widget.md">Colour Picker Widget</a></td></tr></tbody></table>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

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

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://help.mimeeq.com/configurator/options-and-widgets/button-widget.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.