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.

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`

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

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"
        }
      }
    }
  }
});