# Buttons

Customize the appearance of your store’s **buttons** to match your brand’s tone and usability goals. Control button typography, style, shape, and size for primary, secondary, and responsive button states. These settings help maintain consistency across calls to action.

<figure><img src="https://891064830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz8oqtXqtdhOM4CxRzekr%2Fuploads%2FosviCmcfaSHFN3pQftE6%2Fbuttons-theme-settings.gif?alt=media&#x26;token=50c6694b-5b3a-4bfd-aabc-fd0b8f836af8" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="219.09112548828125">Settings</th><th width="141.48699951171875" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Font</td><td align="center"><code>select</code></td><td>Choose the font family for button text: <code>Body</code>, <code>Heading</code>, or <code>Accent</code>.</td></tr><tr><td>Weight</td><td align="center"><code>select</code></td><td>Set the font weight: <code>Light</code>, <code>Normal</code>, or <code>Bold</code>.</td></tr><tr><td>Style</td><td align="center"><code>select</code></td><td>Choose button shape: <code>Square</code>, <code>Rounded</code>, or <code>Pill</code>.</td></tr><tr><td>Letter spacing</td><td align="center"><code>range</code></td><td>Adjust the spacing between letters in button text.</td></tr><tr><td>Uppercase</td><td align="center"><code>checkbox</code></td><td>Toggle uppercase text on all buttons.</td></tr><tr><td>Color</td><td align="center"><code>color</code></td><td>Set <strong>primary button</strong> color.</td></tr><tr><td>Color</td><td align="center"><code>color</code></td><td>Set <strong>secondary button</strong> color.</td></tr><tr><td><strong>Advanced</strong></td><td align="center"></td><td></td></tr><tr><td>Font size (Small button)</td><td align="center"><code>range</code></td><td>Set font size percentage for small buttons.</td></tr><tr><td>Width</td><td align="center"><code>range</code></td><td>Small button width.</td></tr><tr><td>Height</td><td align="center"><code>range</code></td><td>Small button height.</td></tr><tr><td>Font size (Medium button)</td><td align="center"><code>range</code></td><td>Set font size percentage for medium buttons.</td></tr><tr><td>Width</td><td align="center"><code>range</code></td><td>Small button width.</td></tr><tr><td>Height</td><td align="center"><code>range</code></td><td>Small button height.</td></tr><tr><td>Font size (Large button)</td><td align="center"><code>range</code></td><td>Set font size percentage for large buttons.</td></tr><tr><td>Width</td><td align="center"><code>range</code></td><td>Small button width.</td></tr><tr><td>Height</td><td align="center"><code>range</code></td><td>Small button height.</td></tr></tbody></table>