wiz-plain-button

wiz-plain-button is a customizable Vue.js component designed for rendering buttons with dynamic text, links, alignment, and background colors. You can use it in responsive layouts. This component automatically handles browser-specific adjustments and rendering in different email clients.

Learn more about components

• Import and registration
• Property and file types
• Configuration
• Components in eWizard Editor

Usage

Markup:

<wiz-plain-button></wiz-plain-button>

To provide fully custom content inside the button, use the default slot:

<wiz-plain-button>
  <a href="https://example.com" style="color: white; text-decoration: none; padding: 10px 20px; background-color: #28A745; border-radius: 5px;">
    Click me!
  </a>
</wiz-plain-button>

Properties

The following properties are available:

Property	Type	Default value	Description
align	string	N/A	Button alignment on the email layout. One of: "center", "left", "right".
backgroundColor	string	N/A	Background color of the button. Allowed: HEX, RGB, RGBA.
backgroundSelector	string	"a[href]"	CSS selector for styling the button's background. Allows custom DOM traversal.
link	string	N/A	A target URL the button redirects to.
linkSelector	string	"a[href]"	CSS selector for the button's link. Allows custom DOM traversal for advanced use cases.
text	string	N/A	The text to display inside the button.
textSelector	string	"a[href]"	CSS selector for the button's text. Allows custom DOM traversal for advanced use cases.