Unlayer Documentation

Unlayer Documentation

Welcome to Unlayer Documentation. It takes less than 5 minutes to get our editor up and running on your project.

These guides will take you through the process and get you up and running.

Get Started    

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

Updated 2 months ago


Button


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.