> For the complete documentation index, see [llms.txt](https://nextsky.gitbook.io/purity-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nextsky.gitbook.io/purity-theme/group-blocks/basic/button.md).

# Button

The **Button** block lets you add one or two call-to-action buttons to direct customers to important pages, such as sign-in or account creation,... You can customize the label, link, style, and whether the link opens in a new tab.

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FuguIxCxL8CoqbC3raQrM%2Fimage.png?alt=media&amp;token=559c9ca6-3496-4593-9f2d-f84333bdc44e" alt=""><figcaption></figcaption></figure>

## General settings

| Setting                  | Description                                                                                                                             |
| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- |
| **Button label**         | The text displayed on the button (e.g., "Shop Now," "Learn More"). Default is "Button label."                                           |
| **Button link**          | The URL the button navigates to when clicked. This can be an internal page, product, or an external website link.                       |
| **Type**                 | <p>The style of the button</p><ul><li><strong>Primary</strong></li><li><strong>Outline</strong></li><li><strong>Link</strong></li></ul> |
| **Open link in new tab** | Use this option to keep users on your store while allowing them to explore external or additional content.                              |

Purity 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" %}

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FfY2YmA7XOXtRzISHF5ZL%2Fimage.png?alt=media&amp;token=d0959515-1ea4-443d-b170-7ba476ee6b9e" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Outline" %}

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FaiZzFfS8HS8X1E3eTQUc%2Fimage.png?alt=media&amp;token=358ea5bb-688e-41ce-b2c8-1a1aa1442068" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Link" %}

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2Faj6fNMdWArR4QHawl6aS%2Fimage.png?alt=media&amp;token=aca83728-bdd6-4263-bb9d-4094463b1099" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## Size

These settings control the width the button block occupies within the section.

<table><thead><tr><th width="142.60003662109375">Setting</th><th width="106.79998779296875">Applies To</th><th>Description</th></tr></thead><tbody><tr><td>Width</td><td>Desktop</td><td><p>Defines the width of the button block on larger screens:</p><ul><li>Fit (Size determined by content)</li><li>Fill (Expands to fill available space)</li><li>Custom (Allows setting a specific percentage width).</li></ul></td></tr><tr><td>Mobile width</td><td>Mobile</td><td><p>Defines the width of the button block on smaller screens:</p><ul><li>Fit,</li><li>Fill</li><li>Custom.</li></ul></td></tr></tbody></table>

## Spacing

These settings control the external spacing (padding) applied directly above and below this specific block.

| Setting | Description                                                                                                      |
| ------- | ---------------------------------------------------------------------------------------------------------------- |
| Top     | Sets the amount of empty space (padding) above this button block. Measured in pixels (px) (Range: 0px to 100px). |
| Bottom  | Sets the amount of empty space (padding) below this button block. Measured in pixels (px) (Range: 0px to 100px). |