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

#	Setting	Options	Description
1	Name	Text input	The label displayed on the button.
2	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.
3	Button Size	Small, Medium	Controls the button's overall size.
4	Text Case	Normal, Uppercase	Sets the capitalisation of the button label.
5	Button Variant	Filled, Outlined, Text	Filled: solid background. Outlined: border only. Text: no border or background.
6	Button Shape	Pill, Rectangle, Rounded	Controls the corner style of the button.
7	Button Colour	Accent, Accent Light, Gray, Custom	Uses your theme colours, or define custom colours when Custom is selected.
8	Default Button Background	Colour picker	Background colour in the normal state. Available when Custom is selected.
9	Hover Button Background	Colour picker	Background colour on hover. Available when Custom is selected.
10	Default Text Colour	Colour picker	Text colour in the normal state. Available when Custom is selected.
11	Hover Text Colour	Colour picker	Text colour on hover. Available when Custom is selected.
12	Event Name	Text input	Optional custom event name for JavaScript integration.
13	Button Preview	—	Live preview of the button.

Button widget settings panel with width, size, variant, shape and colour options and a live preview

---

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.

Demo — Reset button

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.

Demo — Step-by-step navigation

---

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

Hiding Options

Control which options appear in the option panel and specifications.

Thumbnail Widget

Display option sets as a visual grid of swatches or images.

Colour Picker Widget

Let customers pick any colour or choose from presets.