button

Text inside a styled box with auto-fitting font. Auto-resize semantics are identical to text: font_size is required, it is a starting hint rather than a fixed value, and round-trips return the rendered (post-fit) value.

See also

This is the import-time schema. To override an existing button layer's properties at generation time, see Element Properties → Button.

Property	Type	Notes
payload	string	Button label. Up to 2048 chars (invalid_payload beyond). Blank values are accepted: an explicit "", a whitespace-only label and an omitted payload are all valid — an omitted one defaults to "".
background_color	color	Defaults to #000000. Accepts a gradient — see Colors & Gradients.
color	color	Text color. Defaults to #ffffff. Accepts a gradient — see Colors & Gradients.
font	string (uuid)	Font family UUID.
font_size	number	Required. Starting hint — auto-fits at generation time. static: integer 2–1000 (px). printer: float 0.48–240 (pt).
min_font_size	float	Floor for the auto-fit. Same ranges as font_size. When omitted, nothing is stored.
font_weight	int	One of 100 … 900 in hundreds. Defaults to 400.
font_style	enum	normal | italic. Same field as text.
text_decoration	enum	underline | strikethrough | diagonal-strikethrough, on the label. Same field as text.
text_decoration_color	color	Colour of that rule. Hex/CMYK only — no gradient. Means nothing without text_decoration. See Color & Length Conventions.
text_align	enum	left | center | right — how the label reads inside the button. Defaults to center.
alignment	enum	Where the button box sits in its layer box. Nine grid values, middle center by default. See The two alignments.
line_height	int	1–500, a percentage of font_size. Defaults to 130.
opacity	int	0–100. Defaults to 100.
rotation	float	0–360 inclusive.
stroke	object	{ color, width } — outline around the label glyphs. See Shared Object Shapes for ranges.
radius	int	Corner radius, a single number — a button cannot have per-corner radii. static / animated: integer 0–1000 px. printer: float ≥ 0 in the format's unit.
padding	object | int	{ vertical, horizontal }, or one number for both. Signed, same ranges as on text. This is the button's own padding — the inset that sizes the box the label must fit inside. It is not the highlight box drawn behind the label (that is a text layer feature and has no field here); exporting a design that has one reports it as a warning rather than folding it into padding.
text_shadow	object	{ blur, offset_x, offset_y, color } — shadow on the text glyphs. See Shared Object Shapes for ranges.
shadow	object	{ blur, offset_x, offset_y, color } — box shadow on the button. See Shared Object Shapes for ranges.

Buttons have no text transform

text_transform is text-only — it is unknown_field on button. Uppercase your label in payload instead. text_decoration is accepted on a button: the editor stores an underline or strikethrough on a button label exactly as it does on a text layer.

The two alignments

A button carries two independent alignments, and mixing them up is the usual source of surprise:

Field	Controls	Values
alignment	Where the button box sits inside its layer box	top left … bottom right (nine cells)
text_align	How the label reads inside that box	left | center | right

A button can sit centred in its layer box while its label is right-aligned:

{
  "type": "button",
  "properties": {
    "payload": "Get started",
    "font_size": 52,
    "alignment": "middle center",
    "text_align": "right"
  }
}

alignment is the same nine-cell grid image and logo use, minus custom — a button box has no drag-to-reframe offsets.

Coming from a text layer

A text layer has only one alignment, split across text_align and vertical_align, because there the text's alignment is its position. A button has a box as well as a label, so it takes alignment for the box and has no vertical_align — sending one is unknown_field.