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

TinyMCE has been deprecated. Existing buttons will continue to use TinyMCE, while new buttons dropped into designs will use Lexical.

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',
        },
      },
    },
  },
});