> For the complete documentation index, see [llms.txt](https://awecommerce.gitbook.io/awe-color-swatches/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://awecommerce.gitbook.io/awe-color-swatches/getting-started/design/button.md).

# Button

Shape, size and colors of text buttons like S, M, L.

The **Button** design is used for text options like sizes — **S**, **M**, **L**.

To get started:\
**Design** → **Button** → **Custom**. Pick the **Product page** or **Collection page** tab.

***

## 1. **Shape & size**

<figure><img src="https://1584372634-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQtSZ9l9Z5zXeyqTQcvze%2Fuploads%2Fgit-blob-e52ecaef055d3423c401b2fd039920d97bd88d77%2Fdesign-button-01-shape-size.png?alt=media" alt="Button shape and size"><figcaption></figcaption></figure>

### **1.1 Shape**

**Round** (default), **Square** or **Pill**.

### **1.2 Size**

<table data-header-hidden><thead><tr><th width="200"></th><th></th></tr></thead><tbody><tr><td><strong>Size</strong></td><td><ul><li>For <strong>Square</strong>: 8–120 px.</li></ul></td></tr><tr><td><strong>Width size</strong> / <strong>Height size</strong></td><td><ul><li>For <strong>Round</strong> and <strong>Pill</strong>: width 8–120 px (default 24), height 8–80 px (default 12).</li><li>These are minimums — a button grows to fit its label, so text is never cut off.</li></ul></td></tr><tr><td><strong>Text size</strong></td><td><ul><li>8–32 px (default 13).</li></ul></td></tr><tr><td><strong>Corner radius</strong></td><td><ul><li>For <strong>Round</strong> and <strong>Square</strong>: 0–40 px (default 8). A <strong>Pill</strong> is always fully rounded.</li></ul></td></tr><tr><td><strong>Border thickness</strong></td><td><ul><li>0–8 px (default 1).</li></ul></td></tr></tbody></table>

## 2. **Layout**

* **Alignment**: **Left** (default), **Center** or **Right**.
* **Spacing**: 0–40 px (default 8).

## 3. **Compact display**

Only on the **Collection page** tab — see [Compact display on collection cards](/awe-color-swatches/getting-started/design/compact-display-on-collection-cards.md).

## 4. **Color**

Each color has 3 states — **Default**, **Hover** and **Selected**:

<figure><img src="https://1584372634-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQtSZ9l9Z5zXeyqTQcvze%2Fuploads%2Fgit-blob-d32891d69c07f7336cfea1243df905c423431f47%2Fdesign-button-02-color.png?alt=media" alt="Button colors"><figcaption></figcaption></figure>

* **Border color** (default `#CECECE` / `#000000` / `#000000`)
* **Background color** (default white, then black on hover and selected)
* **Text color** (default black, then white on hover and selected)

***

💬 If you have any related questions, please contact us via **Live chat** in the app.