Button Element

The Button element is a versatile interactive component used for triggers, navigation, and primary actions within the builder canvas.

Live Preview

Click any button in the preview to select it, just like in the real builder canvas.

Preview

Specifications

The Button element is highly customizable, allowing you to match it to your site's design and functional needs:

  • Variants: Choose from Primary, Secondary, Outline, or Ghost styles to set the visual priority.
  • Sizing: Toggle between Small, Medium, and Large to fit various layout contexts.
  • Icons: Add an icon to the left or right side of your text, or create icon-only buttons.
  • Form Actions: Configure buttons to Submit or Reset forms automatically.
  • State Control: Enable or disable buttons to manage user interaction.
  • Custom Styling: Add your own Tailwind CSS classes or custom CSS for full control over the final look.

Interactions

Buttons in SoloPage are more than static elements. They can be linked to Interactions (clicks, hovers) that trigger actions like opening a dialog, scrolling to a section, or navigating to a different page.

AI Guidance

How to prompt for Buttons:

  • Add a primary 'Get Started' button with a right arrow icon.
  • Create a larger, outline button that scrolls to the pricing section.
  • Ensure the call-to-action button uses the brand's secondary color.