Button

The wiz-button component is a flexible and customizable button component that works seamlessly across currently supported eWizard content item types (e-Detailers, emails). The button automatically adapts its rendering and behavior based on the channel context—rendering as an HTML table for email compatibility and as a div-based component for other content items.

The cross-channel button component has the following key features:

• Flexible text with HTML markup support.

• URL navigation with internal/external link handling.

• Customizable sizing and alignment.

• Full width option with mobile auto-detection.

• Email link tracking through data attributes.

• Channel-specific event handling.

Installation

The wiz-button component is part of the eWizard.js component library. To install it to your project, run the following command in the terminal:

wiz install @component/wiz-button

Register the component globally in your application or import it in your Vue template.

Properties

The wiz-button component has the following properties:

Property	Type	Default	Description
componentName	String	'Button'	The display name for the component in d Editor interface. It identifies the component type (used for tracking and logging purposes).
text	String	'<span class="text-style_button"><b>Button</b></span>'	The button label text. Supports HTML markup for advanced styling (e.g., bold, spans with custom classes).
link	String	''	URL for the button to navigate to when clicked. External links open in a new tab (_blank), while internal links starting with # open in the same window (_self).
width	Number	120	Button width in pixels. This property is ignored when fullWidth is set to true.
minHeight	Number	36	Minimum button height in pixels. Only applies in e-Detailers
lineHeight	Number	20	Text line height in pixels. Controls vertical spacing within the button text.
textAlign	String	'center'	Horizontal alignment of the text within the button. Accepts 'left', 'center', or 'right'.
align	String	'left'	Horizontal alignment of the button itself on the page. Accepts 'left', 'center', or 'right'.
fullWidth	Boolean	false	When true, the button stretches to fill the full width of its container.
dataMsysLinkname	String	''	Data attribute for email tracking and link naming in email marketing platforms (e.g., Marketo, Sailthru).

Custom events

The cross-channel button component emits the following custom events for interaction tracking and custom behavior:

Event	Payload	Description
click	None	Emitted when the button is clicked. In e-Detailers, this event is triggered before attempting to navigate through the link property.

Channel-specific behavior

The cross-channel button component adapts its rendering and functionality based on the content item context.

• Renders as a <div> with flexbox layout for modern styling.

• Detects and respects absolute positioning contexts (does not apply alignment classes if positioned absolutely).

• Click events are fully reactive and can trigger custom handlers.

• Link navigation is sealed if custom actions or listeners are present.

• Renders as an HTML <table> element for optimal email client compatibility.

• Uses <td> cells for text wrapping and alignment.

• Text overflow is handled with text-overflow: ellipsis.

• On mobile (≤480px), the button automatically expands to 100% width.

• Link tracking attributes are fully supported via dataMsysLinkname.

Usage examples

To use the wiz-button cross-channel component in your project, add the following to the template section of the Vue file:

<wiz-button
  text="<span class='text-style_button'><b>Click Me</b></span>"
  :width="150"
  align="center"
  link="https://example.com"
></wiz-button>

Notes

• The button component automatically detects the content item context and renders appropriately without manual configuration.

• Link navigation is prevented in the edit mode to allow editing without unwanted navigation.

• Internal links (starting with #) and external links are handled automatically with appropriate target attributes.