# Button
## Overview A customizable button component that renders a link styled as a button with various appearance and layout options. Supports responsive visibility controls, multiple style variants, and custom actions including overlay triggers, form submissions, and navigation. ## Common use cases * Create call-to-action buttons throughout your theme * Use custom actions to trigger overlays, form submissions, or JavaScript functions * Configure button size and color to match your theme's design system * Use full-width option for prominent mobile CTAs * Trigger account, search, menu, or cart overlays with preset actions * Submit forms or perform logout/login actions with custom button behavior ## Compatible blocks The following blocks can be nested within this block: * [Rich text](https://help.brickspacelab.com/slab/content/blocks/basics/rich-text) * [Icon](https://help.brickspacelab.com/slab/content/blocks/basics/icon) * [Image](https://help.brickspacelab.com/slab/content/blocks/basics/image) * [Localization label](https://help.brickspacelab.com/slab/content/blocks/utility/localization-label) * [Cart count](https://help.brickspacelab.com/slab/content/blocks/basics/broken-reference) * [Cart price](https://help.brickspacelab.com/slab/content/blocks/basics/broken-reference) ## Block settings ### General | Setting | Description | Options | | ---------------------- | -------------------------------------------------------------------------------------- | ------------------------- | | Show advanced settings | Reveals full-width and square layout, device visibility, and scroll or load animations | Checkbox (default: false) | ### Content | Setting | Description | Options | | ---------------------- | ----------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | URL | Link destination for the button |

URL input (default: /collections/all)

Visible when enable custom action is false

| | Enable custom action | Enables custom JavaScript actions instead of URL navigation | Checkbox (default: false) | | Overlay preset | Select a preset overlay action or use custom |

• None (default)
• Account
• Search
• Menu
• Primary cart
• Alternative cart
• Custom

Visible when enable custom action is true and enable close overlays is false and enable form submission is false and enable logout is false and enable back to top is false

| | Overlay custom | Custom overlay ID for custom overlay actions |

Text input

Visible when enable custom action is true and overlay preset is custom

| | Enable close overlays | Closes all open overlays when button is clicked |

Checkbox (default: false)

Visible when enable custom action is true and enable form submission is false and enable logout is false and enable back to top is false and overlay preset is none

| | Enable form submission | Submits the nearest form when clicked |

Checkbox (default: false)

Visible when enable custom action is true and enable close overlays is false and enable logout is false and enable back to top is false and overlay preset is none

| | Enable logout | Redirects to account logout URL |

Checkbox (default: false)

Visible when enable custom action is true and enable close overlays is false and enable form submission is false and enable back to top is false and overlay preset is none

| | Enable login | Redirects to account login URL |

Checkbox (default: false)

Visible when enable custom action is true and enable close overlays is false and enable form submission is false and enable back to top is false and overlay preset is none

| | Enable back to top | Scrolls page to top when clicked |

Checkbox (default: false)

Visible when enable custom action is true and enable close overlays is false and enable form submission is false and enable logout is false and overlay preset is none

| ### Spacing | Setting | Description | Options | | ------------------------- | ----------------------------------------- | ------------------------- | | Enable internal padding | Adds internal padding to the button | Checkbox (default: true) | | Enable horizontal padding | Adds horizontal padding around the button | Checkbox (default: false) | | Enable top padding | Adds top padding around the button | Checkbox (default: false) | | Enable bottom padding | Adds bottom padding around the button | Checkbox (default: false) | ### Color | Setting | Description | Options | | --------------- | ------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | | Type | Custom color scheme vs preset styles |

• Custom
• Base (default)

| | Button (custom) | Color scheme applied to the button |

Color scheme picker

Visible when type is Custom

| | Button (base) | Preset button style |

• Plain
• Main
• Blur
• Outline
• Inverted outline
• Text
• Inverted text



Visible when type is Base

| ### Style | Setting | Description | Options | | ----------- | ------------------------ | ------------------------------------------------------------------ | | Button size | Controls the button size |

• Extra small
• Small
• Standard (default)
• Large

| ### Layout | Setting | Description | Options | | -------------------- | ------------------------------------------------------ | -------------------------------------------------------------------------------------------------- | | Horizontal alignment | Controls horizontal alignment of the button |

• Left (default)
• Center
• Right

Visible when enable full width is false

| | Enable full width | Makes the button span the full width of its container |

Checkbox (default: false)

Visible when Show advanced settings is on

| | Enable square | Uses a square footprint (useful for icon-only buttons) |

Checkbox (default: false)

Visible when Show advanced settings is on

| ### Display | Setting | Description | Options | | ---------- | ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | | Visibility | Controls when the block is visible |

• All (default)
• Mobile only
• Desktop only



Visible when Show advanced settings is on

| ### Advanced motion | Setting | Description | Options | | ---------------- | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Load animation | Animation when the block first loads |

• None (default)
• Fade
• Fade up
• Offset fade
• Offset fade up



Visible when Show advanced settings is on and Scroll animation is None

| | Scroll animation | Animation tied to scroll position |

• None (default)
• Fade
• Slide up
• Slide down
• Slide left
• Slide right
• Zoom



Visible when Show advanced settings is on and Load animation is None

|