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.

PropertyDefault Value
buttonColors{ color: "#FFFFFF", backgroundColor: "#3AAEE0", hoverColor: "#FFFFFF", hoverBackgroundColor: "#3AAEE0" }
padding10px 20px
textAligncenter
size{ autoWidth: true, fullWidthOnMobile: false, width: '50%', }
lineHeight120%
borderRadius4px
containerPadding10px

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

Did this page help you?