Button

See also

This is the generation-time override. To author a button layer's full schema at import time, see Design Import → Layer Types → Button.

The button is a container (with a background or a border) containing a text.

Available properties

A button accepts a subset of the text properties — skew_y, side borders and max_lines are text-only.

A button is the one layer with two alignments: alignment moves the button box, text_align moves the label inside it. On a text layer there is only one, because there the alignment is the position.

Property	Description
payload	Same as Text Payload, capped at 2 048 characters (text allows 10 000)
color	Same as Text Color
background_color	Background fill color of the button container. Same format as color
background_padding	Same as Text Background Padding
font / font_weight	Same as Text Font — font is a UUID
font_size	Number. Force font size — pixels on static / animated (must be > 1), points (pt) on printer. See Units on Print Designs.
min_font_size / auto_resize	Same as on text
line_height	Number. Force line height in percentage (must be > 1). Only applied on multiline text
alignment	Placement of the button box — the nine-cell grid, same values as Text Alignment
text_align	"left", "center" (default) or "right". Alignment of the label inside the box
stroke_color / stroke_width	Border color and width of the button — see Stroke
text_transform	Applied to the label. Same values as on a text element
shadow_color / shadow_blur / shadow_offset_x / shadow_offset_y	See Shadow — applied to the background only

Example

{
  "payload": "My click to action",
  "color": "#FFFFFF",
  "background_color": "#1A47FF"
}

Not everything is overridable

The corner radius cannot be overridden via API — set it in the design builder.

Related

• Text — the full property set this page subsets
• Common properties — hidden and shadows