Email: button

A button is a void element. The canvas shows it as the reader will see it; its label, its link, its style and its alignment are in the inspector.

Setting it up

createEmailFeatures() includes it. To add it to another list of features:

import { buttonFeature, createContentFeatures } from "@voila.dev/ui/content-editor";
 
const features = [...createContentFeatures(), buttonFeature];

Button in the slash menu or the insert menu adds one and selects it, so the inspector opens on its label. Typed on an empty line, it takes that line's place.

Fields

An empty label shows its placeholder on the canvas; the reader writes nothing for it.

The stored node

{
	"type": "button",
	"label": "Book a slot",
	"href": "https://example.com/book",
	"variant": "primary",
	"align": "center",
	"children": [{ "text": "" }]
}

The web reader writes <p style="text-align:center"><a href="…" class="button button-primary">Book a slot</a></p>. buttonReader is the reader alone.

The email block editor's button block maps field for field: label, href, variant and align keep their names and their values.

Labels

The item is items.button. The fields are fields.buttonLabel (its placeholder fields.buttonPlaceholder), fields.buttonLink, fields.buttonStyle with fields.buttonPrimary and fields.buttonSecondary, and fields.align.