> For the complete documentation index, see [llms.txt](https://uxsmart.gitbook.io/velare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxsmart.gitbook.io/velare/customize-your-pages/basic/button.md).
# Button
The **Button** block is the part of a section shoppers click. It is added inside a section, usually as the last block, so the heading and the supporting wording come first and the button gives that message somewhere to go. Add a second Button block when a section carries two destinations, for example a main collection and a secondary page, and give the less important one a lighter style so the two do not compete.
### How to add it
{% hint style="success" %}
**Steps:**
1. Go to **Online Store > Themes > Customize**.
2. In the left sidebar, click the section you want to add the button to.
3. Click **Add block** and choose **Button**.
4. Write the label, pick the destination in **Button link**, then choose a **Type**.
{% endhint %}
*Result:* the button appears inside the section in the preview, and clicking it in the preview opens the destination you set.
### General settings
| Setting | Description |
| ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Button label** | The words shoppers read on the button. Wording that names the next step, such as "Shop Now" or "Learn More", performs better than the default "Button label." |
| **Button link** | Where the click takes shoppers. It can point at a page, product, or collection in your store, or at an address outside it. |
| **Type** |
How much the button stands out from what is around it
Primary: a solid filled button, for the one action you most want taken
Outline: a bordered button, for a secondary destination in the same section
Link: plain underlined text, for a quiet link that should not pull attention
|
| **Open link in new tab** | Loads the destination in a second browser tab so your store stays open behind it. Worth turning on for addresses that lead away from your store. |
Vélare theme supports three predefined button styles. You can select the desired style in the theme settings to match your store’s design requirements:
{% tabs %}
{% tab title="Primary" %}
{% endtab %}
{% tab title="Outline" %}
{% endtab %}
{% tab title="Link" %}
{% endtab %}
{% endtabs %}
### Size
These settings control the width the button block occupies within the section.
| Setting | Applies To | Description |
| ------------ | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Width | Desktop |
How wide the button grows on a computer screen.
Fit: the button stays as wide as its label, which suits a button sitting next to other content
Fill: the button stretches across the space it is given, so it reads as the main action
Custom: you set the width yourself as a percentage
|
| Mobile width | Mobile |
The same choice for phone screens, where a full width button is easier to tap.
Fit,
Fill
Custom.
|
### Spacing
These settings control the external spacing (padding) applied directly above and below this specific block.
| Setting | Description |
| ------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| Top | Lifts the button away from the wording above it. Raise it when the button looks glued to the last line of text. Accepts 0px to 100px. |
| Bottom | Leaves clear space under the button so the next block does not crowd the tap area. Accepts 0px to 100px. |
### What changes on the storefront
* Shoppers get a clickable action inside the section instead of a dead end at the bottom of the wording.
* The **Type** you pick decides how strongly the action competes with the rest of the page, which matters most when two buttons sit in the same section.
* **Fill** on mobile gives a wide tap target, which is easier to hit than a short **Fit** button.
### Related pages
* [Basic](/velare/customize-your-pages/basic.md): the other content blocks that usually sit above this one
* [Popup link](/velare/customize-your-pages/links/popup-link.md): a clickable element that opens a popup instead of loading a page
* [Colors](/velare/set-up-your-store/colors.md): where the button colors of each style come from
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## 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, and the optional `goal` query parameter:
```
GET https://uxsmart.gitbook.io/velare/customize-your-pages/basic/button.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
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.