> 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

Create interactive buttons in your configurator to reset options, guide users through step-by-step flows, or trigger custom JavaScript events.

The Button widget lets you add 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

| Setting                   | Options                            | Description                                                                                                                           |
| ------------------------- | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| Name                      | Text input                         | The label displayed on the button.                                                                                                    |
| Button Width              | Full Width, Half Width             | Full Width spans the entire container. Half Width takes 50% — add two half-width buttons to the same group for a side-by-side layout. |
| Button Size               | Small, Medium                      | Controls the button's overall size.                                                                                                   |
| Text Case                 | Normal, Uppercase                  | Sets the capitalisation of the button label.                                                                                          |
| Button Variant            | Filled, Outlined, Text             | Filled: solid background. Outlined: border only. Text: no border or background.                                                       |
| Button Shape              | Pill, Rectangle, Rounded           | Controls the corner style of the button.                                                                                              |
| Button Colour             | Accent, Accent Light, Gray, Custom | Uses your theme colours, or define custom colours when **Custom** is selected.                                                        |
| Default Button Background | Colour picker                      | Background colour in the normal state. Available when **Custom** is selected.                                                         |
| Hover Button Background   | Colour picker                      | Background colour on hover. Available when **Custom** is selected.                                                                    |
| Default Text Colour       | Colour picker                      | Text colour in the normal state. Available when **Custom** is selected.                                                               |
| Hover Text Colour         | Colour picker                      | Text colour on hover. Available when **Custom** is selected.                                                                          |
| Event Name                | Text input                         | Optional custom event name for JavaScript integration.                                                                                |
| Button Preview            | —                                  | Live preview of the button.                                                                                                           |

![Button Configuration Settings](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 will hide 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.


---

# 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 dynamically by asking a question.

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

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.