# Buttons Buttons are very useful, and have many different applications in Formsort. Below are the some options provided, as well as some insight on configuring their behavior and design. *** ### Select buttons Select questions (and Boolean questions) can use customizable Select buttons to display choices to the responder. There are three main styles available—**Default**, **Checkmark**, and **Image**—each with its own configuration options. Like other design elements in Formsort, Select buttons can be styled on a per-UI basis. #### Select Button Types **Default** The **Default** style presents a clean button with just a label—no icons or imagery. This is the base styling applied unless other visual features are enabled.
**Checkmarks** When **Show checkmarks and radio buttons on choices** is enabled in the **Style** tab of a Select question, checkmarks (or radio buttons) appear inside the choice buttons.
Styling for checkmark-based buttons is controlled in two places: * **Theme** → **Buttons** → **Select** → **Checkmark** → Controls button styling, and checkmark positioning. * **Theme** → **Checkmarks** → Controls the styling of the checkmark or radio icons. * Checkmark styles will adapt styles defined in either **Single choice** or **Multiple choice** based on whether **Allow multiple selection** is enabled or not. You can also control the **vertical alignment** of the checkmarks from the right-hand menu. {% hint style="info" %} For more details, see our documentation on [Styling checkmarks and radio buttons](https://docs.formsort.com/styling/customizing-appearance/checkmarks). {% endhint %} **Image** Enabling **Show images on choices** in the Style tab allows you to add images, videos, or GIFs to select choices.
After enabling this option, you can add media directly within each choice configuration.
Image-style settings are located under: **Theme → Buttons → Select → Image** #### Layout Options You can adjust how choices are laid out within a Select question. Available layout styles include: * Grid * Vertical (default) * Horizontal * Snug * Space Around * Space Between
The layout setting can be adjusted directly on the Select question. #### Style Overrides Because Select buttons are used in various design contexts, you can override default styling on a per-question basis. To do this: 1. Select the question. 2. Open the **Style** tab. 3. Enable **Override default select button style**. *** ### Next button The [Next](https://docs.formsort.com/adding-questions-and-content/content-reference/next-button) button is probably the most important button within the flow. Clicking it will advance the user to the next available step. The Next button position can be configured in Layout, and style settings can be found in the Buttons → Next section of the Theme tab. #### Style options
By default, the Next button will only appear when the user has answered all the required questions and needs a way to move forward. You can opt to "Always show next button" by enabling the setting under **Behavior**, in which case the Next button will show in it's **Disabled** state until the user is available to proceed. By default, "Next" is provided as the button label, but this can be modified or removed by changing the string inside the **Label** input. You can add an Image to your next button, style settings for which can be found at the bottom of the menu under **Image style** once an image has been added. #### Next button style override If you've added your [Next button as a component](https://docs.formsort.com/building-flows/content-types/next-button) on a step, the style settings can be overriden in the component's style menu. With the component selected, open the Style menu and disable "Use default select button style".
*** ### Skip button A **skip button** will appear if enabled, but only on steps where **all** questions within the step are [optional](https://docs.formsort.com/conditions-and-logic#optional). Of course, the responder could just click the Next button in this case, but having an explicit skip action may help people understand that their responses are not required on the current step. #### Options
By default, the button will have "Skip" as the copy inside the button, but this can be modified or removed by changing the string inside the **Label** input. You can add an Image to your skip button, style settings for which can be found at the bottom of the menu under **Image style** once an image has been added. *** ### Previous button The **previous button** is optional, but recommended - it gives responders more control in navigating the flow. #### Options
By default, the button will have "Previous" as the copy inside the button, but this can be modified or removed by changing the string inside the **Label** input. You can add an Image to your Previous button, style settings for which can be found at the bottom of the menu under **Image style** once an image has been added. *** ### Exit button If you enable the **exit button** in the style editor, users will be able to click it to abandon the flow. There are a few cases where having a close or exit button is helpful: * If users are accessing your flow directly, but you wish to bring them to your own page if they are abandoning. * If you set a **redirect URL** then they will be brought to that URL. * If [embedding](https://docs.formsort.com/publishing-and-deployment/embedding) Formsort and you need a way to allow users to close without abandoning the page entirely. * The parent window will receive the `FlowClosed` event when this happens, so you can close the Formsort embed in your code. #### Options
By default, the button will have an "X" as the copy inside the button, but this can be modified or removed by changing the string inside the **Label** input. You can add an Image to your Exit button, style settings for which can be found at the bottom of the menu under **Image style** once an image has been added. *** ### Restart button If you add a **restart button** to your flow, the user will be able restart the flow with all their inputs cleared.
By default, the Restart button will have "Restart" as the copy inside the button, but this can be modified or removed by changing the string inside the **Label** input. You can add an Image to your Restart button, style settings for which can be found at the bottom of the menu under **Image style** once an image has been added. *** ### Default buttons The **default button** styles will be applied to any buttons not listed above.