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

# Button

Add clickable call-to-action buttons that link customers to sections, pages, or external URLs.

### 1. What you can do

* Add call-to-action buttons with custom labels and links
* Choose between filled (primary), outlined (secondary), and text-only (link) styles
* Control button size, width, and corner shape
* Link to any page, product, collection, or external URL
* Set different sizing for desktop and mobile
* Override global button styles for individual buttons without affecting the rest of your store

### 2. How to add this block

{% stepper %}
{% step %}
**Click the section**

In the Theme Editor, click the section where you want to add a button.
{% endstep %}

{% step %}
**Add a button block**

Click **Add block** and select **Button**.
{% endstep %}

{% step %}
**Enter the button details**

Enter your button label and link.
{% endstep %}

{% step %}
**Adjust the appearance**

Adjust the appearance settings below.
{% endstep %}

{% step %}
**Position the block**

Drag the block to your preferred position within the section.
{% endstep %}

{% step %}
**Save your changes**

Click **Save**.
{% endstep %}
{% endstepper %}

### 3. Settings

#### 3.1. Action

<details>

<summary>Label</summary>

The text that appears inside the button. Keep it short and lead with a verb: "Shop Now", "View Collection", "Get Started", "Read More".

</details>

<details>

<summary>Link</summary>

Where the button takes your customer when clicked. You can link to any Shopify page (product, collection, blog post) or enter an external URL.

To create a button that scrolls to a specific section on the same page, enter `#section-id` (where `section-id` matches the custom identifier you've set on the target section).

{% hint style="success" icon="circle-info" %}
**Note:** A button with no link will still appear on your storefront but won't do anything when clicked. Always add a destination.
{% endhint %}

</details>

<details>

<summary>Open in new tab</summary>

When enabled, the destination opens in a new browser tab, keeping your store open in the background.

{% hint style="success" icon="circle-info" %}
Turn this on for external links (social profiles, partner sites) so customers don't leave your store entirely. Leave it off for internal links: customers expect to stay in the same tab when navigating within your store.
{% endhint %}

</details>

#### 3.2. Appearance

<details>

<summary>Icon</summary>

Adds a small icon alongside your button label.

<table><thead><tr><th width="160.4765625">Setting</th><th width="158.1484375">Options</th><th>What it does</th></tr></thead><tbody><tr><td><strong>Custom icon</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Toggles whether a custom icon is displayed alongside the button label.</td></tr><tr><td><strong>Choose icon</strong></td><td>Curated icon selector</td><td>Select an icon from the theme's built-in icon collection. <em>Only available when <strong>Custom icon</strong> is <strong>On</strong></em>.</td></tr></tbody></table>

</details>

<details>

<summary>Color scheme</summary>

Controls the color scheme used for the button.

<table><thead><tr><th width="160.4765625">Setting</th><th width="158.1484375">Options</th><th>What it does</th></tr></thead><tbody><tr><td><strong>Inherit color scheme</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>When enabled, the button inherits the color scheme from the section or container. Turn off to assign a specific color scheme.</td></tr><tr><td><strong>Color scheme</strong></td><td>Color scheme picker</td><td>Selects a specific color scheme for the button. <em>Only available when <strong>Inherit color scheme</strong> is <strong>Off</strong></em>.</td></tr></tbody></table>

</details>

<details>

<summary>Button type</summary>

Controls the overall visual style of the button.

<table><thead><tr><th width="160.4765625">Setting</th><th width="158.1484375">Options</th><th>What it does</th></tr></thead><tbody><tr><td><strong>Button type</strong></td><td><ul><li>Primary</li><li>Secondary</li><li>Link</li></ul></td><td><p>Sets the button style.</p><ul><li><strong>Primary</strong> is your main button style configured in <a href="/arctos-theme/theme-settings/colors.md">Theme Settings → Colors</a> for primary actions.</li><li><strong>Secondary</strong> is for supporting actions.</li><li><strong>Link</strong> is text-only with no background or border for subtle actions.</li></ul></td></tr></tbody></table>

</details>

<details>

<summary>Custom style</summary>

When enabled, you can override your theme's global button styling for this specific button without affecting other buttons across your store.

<table><thead><tr><th width="177.26953125">Setting</th><th width="151.9296875">Options</th><th>What it does</th></tr></thead><tbody><tr><td><strong>Custom style</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Enables custom button styling overrides for this block.</td></tr><tr><td><strong>Shape</strong></td><td><ul><li>Square</li><li>Rounded</li><li>Pill</li></ul></td><td>Controls the corner style of the button. Square is sharp, Rounded is soft, and Pill is fully rounded on both ends. <em>Only available when <strong>Button type</strong> is <strong>not Link</strong></em>.</td></tr><tr><td><strong>Hover effect</strong></td><td><ul><li>Fade</li><li>Slide</li><li>Circle</li><li>Bloom</li></ul></td><td>The animation that plays when a customer hovers over the button. <em>Only available when <strong>Button type</strong> is <strong>not Link</strong></em>.</td></tr><tr><td><strong>Link style</strong></td><td><ul><li>Classic</li><li>Underline</li></ul></td><td>Classic shows no underline until hover. Underline keeps a permanent underline. <em>Only available when <strong>Button type</strong> is <strong>Link</strong></em>.</td></tr></tbody></table>

</details>

<details>

<summary>Width</summary>

Controls how much horizontal space the button takes up.

<table><thead><tr><th width="160.4765625">Setting</th><th width="158.1484375">Options</th><th>What it does</th></tr></thead><tbody><tr><td><strong>Width</strong></td><td><ul><li>Fit</li><li>Fill</li><li>Custom</li></ul></td><td><ul><li><strong>Fit</strong> sizes the button to its label text.</li><li><strong>Fill</strong> stretches the button to fill the available container width.</li><li><strong>Custom</strong> lets you set an exact width in pixels or as a percentage.</li></ul><p><em>Only available when <strong>Button type</strong> is <strong>not Link</strong></em>.</p></td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Enables separate button width and size settings for mobile screens. <em>Only available when <strong>Button type</strong> is <strong>not Link</strong></em>.</td></tr></tbody></table>

</details>

<details>

<summary>Size</summary>

Controls the overall size of the button through internal padding.

<table><thead><tr><th width="160.4765625">Setting</th><th width="158.1484375">Options</th><th>What it does</th></tr></thead><tbody><tr><td><strong>Size</strong></td><td><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td><td><p>Controls button padding.</p><ul><li><strong>Small</strong> is compact for tight spaces</li><li><strong>Medium</strong> is balanced for standard layouts</li><li><strong>Large</strong> provides generous padding for hero sections.</li></ul><p><em>Only available when <strong>Button type</strong> is <strong>not Link</strong>.</em></p></td></tr></tbody></table>

</details>

<details>

<summary>Button text style <em>(Link type only)</em></summary>

Since link-style buttons have no background or border, they rely on typography styles to define their appearance. Choose a style that fits the surrounding text and section context.

<table><thead><tr><th width="160.4765625">Setting</th><th width="158.1484375">Options</th><th>What it does</th></tr></thead><tbody><tr><td><strong>Text style</strong></td><td><ul><li>Display</li><li>Heading 1-6</li><li>Paragraph</li><li>Eyebrow text</li><li>Description</li><li>Label</li><li>Custom</li></ul></td><td>Selects a typography role for link-style button text. <em>Only available when <strong>Button type</strong> is set to <strong>Link</strong>.</em></td></tr></tbody></table>

</details>

#### 3.3. Spacing

<details>

<summary>Margin</summary>

Spacing controls add room around the Button block to separate it from neighboring blocks.

<table><thead><tr><th width="160.4765625">Setting</th><th width="158.1484375">Options</th><th>What it does</th></tr></thead><tbody><tr><td><strong>Margin</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Enables custom margin spacing around the button block. When enabled, lets you set individual top, bottom, left, and right spacing in pixels.</td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Enables separate top, bottom, left, and right margin values for mobile screens. <em>Only available when <strong>Margin</strong> is <strong>On</strong>.</em></td></tr></tbody></table>

</details>