> 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/swatch/variant-display/button.md).

# Button

{% hint style="success" %}
**Available on:** Product page, Collection page
{% endhint %}

✨Demo product: [Button](https://optis-color-swatch-variant.myshopify.com/products/button?_pos=1&_psq=button&_ss=e&_v=1.0) (password: 1)

<figure><img src="/files/qCj0bXLv27eIbgG2b1ZH" alt="Button variant selector on a product"><figcaption></figcaption></figure>

### **Function**

Displays option values as **clickable text buttons**, allowing customers to quickly select their desired option.

### **How it works**

* Each option appears as a **button with text**
* The selected button is **visually highlighted**

### **Use when**

* Options are **text-based** (e.g. Size, Material, Style)
* No image comparison is needed

### **How it looks on your store**

* Product page:

<figure><img src="/files/l2RDupDpGe8ecccW9agG" alt="Button variant selector on the product page"><figcaption></figcaption></figure>

* Collection page:

<figure><img src="/files/SDKayo3Dq2NkSypOEi4a" alt="Button variant selector on the collection page"><figcaption></figcaption></figure>