> For the complete documentation index, see [llms.txt](https://docs.optis.me/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.optis.me/product-options/20-option-types/swatch-and-button.md).

# Swatch & Button

Swatch and Button options show the values as visual choices instead of a list. In the option editor they are listed under **Swatch**.

* [Swatch](/product-options/20-option-types/swatch-and-button/swatch.md) - each value is a color or an image. Optionally show the value label below or next to the swatch, and use [Live mockup](/product-options/advanced-setup/other-popular-features/product-personalizer-live-mockup-settings.md) to preview the choice on the product.
* [Button](/product-options/20-option-types/swatch-and-button/button.md) - each value is a clickable button, ideal for sizes, materials or service add-ons.

Both support **Add-on** prices, **SKU**, **Help text**, **Quantity** and limits on how many values can be selected. See [Limit Min/Max Selectors](/product-options/advanced-setup/limit-min-max-selectors-in-checkbox-button-options-swatch.md).