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

Did this page help you?