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:
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 • Ghost • 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
SlabButton
How do I get started with my workspace?
Start by connecting your source repository and choosing the pages you want to publish.
You can then browse your documentation and ask questions about the content your team has shared.
