# 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="/files/lgcXSsLnIUFg0sTCPfni" 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://palo-alto.presidiocreative.com/theme-settings/settings/buttons.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.