> 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="https://4026661835-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F50cmOdvfYj3qqQaTzKEI%2Fuploads%2Fgit-blob-44d9a4670e1d598852646bc35c951abe6eb8ef53%2Fbutton-hero.png?alt=media" 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="https://4026661835-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F50cmOdvfYj3qqQaTzKEI%2Fuploads%2Fgit-blob-2b3543bf07c0767b5f8d69b1e1cd46acc6c40746%2Fbutton-product-page.png?alt=media" alt="Button variant selector on the product page"><figcaption></figcaption></figure>

* Collection page:

<figure><img src="https://4026661835-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F50cmOdvfYj3qqQaTzKEI%2Fuploads%2Fgit-blob-2a23a47941ebe2506cc862585a7416cd29353ee5%2Fbutton-collection-page.png?alt=media" alt="Button variant selector on the collection page"><figcaption></figcaption></figure>