Button

Button is a built-in tool so users can add buttons to their designs. This tool is supported for both display modes: emails and web pages.

warning

The text editor for buttons has been updated. Existing buttons in saved designs will continue using the legacy editor, while new buttons will use the updated editor.

Enable / Disable

Button tool is enabled by default but you can choose to disable it.

unlayer.init({
  tools: {
    button: {
      enabled: false,
    },
  },
});

---

Link Types

Button tools comes with the following actions:

• Open Website
• Send Email
• Call Phone Number
• Send SMS

You can add custom link types as well. Learn more

---

Default Values

Button tool comes with the following default values. You can choose to change any of these.

Property	Default Value
buttonColors	{ color: "#FFFFFF", backgroundColor: "#3AAEE0", hoverColor: "#FFFFFF", hoverBackgroundColor: "#3AAEE0" }
padding	10px 20px
textAlign	center
size	{ autoWidth: true, fullWidthOnMobile: false, width: '50%', }
lineHeight	120%
borderRadius	4px
containerPadding	10px
textJson	{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Button Text","type":"extended-text","version":1}],"format":"","indent":0,"type":"extended-paragraph","version":1,"textFormat":0,"isInlineTool":true}],"format":"","indent":0,"type":"root","version":1}}

Here are a few examples on how to change these default values.

Text

unlayer.init({
  tools: {
    button: {
      properties: {
        textJson: {
          value:
            '{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Custom Text","type":"extended-text","version":1}],"format":"","indent":0,"type":"extended-paragraph","version":1,"textFormat":0,"isInlineTool":true}],"format":"","indent":0,"type":"root","version":1}}',
        },
      },
    },
  },
});

---

Button Colors

unlayer.init({
  tools: {
    button: {
      properties: {
        buttonColors: {
          value: {
            color: '#FFFFFF',
            backgroundColor: '#3AAEE0',
            hoverColor: '#FFFFFF',
            hoverBackgroundColor: '#3AAEE0',
          },
        },
      },
    },
  },
});

---

Padding

unlayer.init({
  tools: {
    button: {
      properties: {
        padding: {
          value: '10px 20px',
        },
      },
    },
  },
});

---

Text Alignment

unlayer.init({
  tools: {
    button: {
      properties: {
        textAlign: {
          value: 'center',
        },
      },
    },
  },
});