Button Schema

Introduction

Schemas are structured definitions that describe the format, rules, and relationships of data within a system. They ensure consistency and validate inputs. In Beefree SDK, the Simple Button Schema defines how buttons are structured and styled within email, page, and popup builders. It enables customization of appearance, behavior, and interactivity — including hover effects, borders, padding, and click-through destinations. This documentation breaks down the schema's properties, requirements, and usage examples to help you implement and design button blocks effectively.

Reference the Simple Schema GitHub repository for more information.

Schema Overview

This section summarizes the purpose and key characteristics of the Simple Button Schema.

• Schema Name: Simple Button

• Purpose: Defines clickable buttons with configurable text, links, styling, and hover states.

• Related Schemas:

  • definitions.schema.json (for padding, border-radius, border-width)

Structure Definition

Below is the JSON Schema definition and a detailed breakdown of each property.

JSON Schema

{
  "$schema": "http://json-schema.org/draft-07/schema",
  "$id": "simple_button.schema.json",
  "title": "Simple Button",
  "type": "object",
  "additionalProperties": false,
  "properties": {
    "type": {
      "const": "button"
    },
    "label": {
      "type": "string",
      "format": "noAnchorTags"
    },
    "text": {
      "type": "string",
      "format": "noAnchorTags"
    },
    "align": {
      "enum": [
        "left",
        "center",
        "right"
      ]
    },
    "href": {
      "type": "string"
    },
    "target": {
      "enum": [
        "_blank",
        "_self",
        "_top"
      ]
    },
    "size": {
      "type": "integer",
      "minimum": 1
    },
    "color": {
      "type": "string"
    },
    "background-color": {
      "type": "string"
    },
    "padding-top": {
      "$ref": "definitions.schema.json#/definitions/padding"
    },
    "padding-right": {
      "$ref": "definitions.schema.json#/definitions/padding"
    },
    "padding-bottom": {
      "$ref": "definitions.schema.json#/definitions/padding"
    },
    "padding-left": {
      "$ref": "definitions.schema.json#/definitions/padding"
    },
    "contentPaddingTop": {
      "$ref": "definitions.schema.json#/definitions/padding"
    },
    "contentPaddingRight": {
      "$ref": "definitions.schema.json#/definitions/padding"
    },
    "contentPaddingLeft": {
      "$ref": "definitions.schema.json#/definitions/padding"
    },
    "contentPaddingBottom": {
      "$ref": "definitions.schema.json#/definitions/padding"
    },
    "hoverBackgroundColor": {
      "type": "string"
    },
    "hoverColor": {
      "type": "string"
    },
    "hoverBorderColor": {
      "type": "string"
    },
    "hoverBorderWidth": {
      "$ref": "definitions.schema.json#/definitions/borderWidth"
    },
    "locked": {
      "type": "boolean"
    },
    "border-radius": {
      "$ref": "definitions.schema.json#/definitions/borderRadius"
    },
    "border-color": {
      "type": "string"
    },
    "border-width": {
      "$ref": "definitions.schema.json#/definitions/borderWidth"
    },
    "customFields": {
      "type": "object"
    }
  }
}

Field Descriptions

The following table lists the field descriptions along with their corresponding data type, whether or not they are mandatory, and their description.

Property	Type	Mandatory	Description
text	string	No	The text of the button
label deprecated (use text)	string	No	The label of the button
href	string	No	The hyperlink reference
target	enum	No	The target of the hyperlink
size	integer	No	The size of the button text
color	string	No	The color of the button text
background-color	string	No	The background color of the button
padding-top	integer	No	The top padding of the button (0-60)
padding-right	integer	No	The right padding of the button (0-60)
padding-bottom	integer	No	The bottom padding of the button (0-60)
padding-left	integer	No	The left padding of the button (0-60)
contentPaddingTop	integer	No	The top content padding inside the button (0-60)
contentPaddingRight	integer	No	The right content padding inside the button (0-60)
contentPaddingLeft	integer	No	The left content padding inside the button (0-60)
contentPaddingBottom	integer	No	The bottom content padding inside the button (0-60)
hoverBackgroundColor	string	No	The hover background color of the button
hoverColor	string	No	The hover color of the button text
hoverBorderColor	string	No	The hover border color of the button
hoverBorderWidth	integer	No	The hover border width of the button (0-30)
locked	boolean	No	Whether the button is locked
border-radius	integer	No	The border radius of the button (0-60)
border-color	string	No	The border color of the button
border-width	integer	No	The border width of the button (0-30)
customFields	object	No	Custom fields
locked	boolean	No	Whether the module is locked not available for single content addon

Usage Examples

Reference an example of the schema in the following code snippet.

Example Button

{
  "text": "Click Me",
  "href": "https://example.com",
  "target": "_blank",
  "size": 12,
  "color": "#FFFFFF",
  "background-color": "#0000FF",
  "padding-top": 10,
  "padding-right": 10,
  "padding-bottom": 10,
  "padding-left": 10,
  "contentPaddingTop": 5,
  "contentPaddingRight": 5,
  "contentPaddingLeft": 5,
  "contentPaddingBottom": 5,
  "hoverBackgroundColor": "#FF0000",
  "hoverColor": "#00FF00",
  "hoverBorderColor": "#000000",
  "hoverBorderWidth": 2,
  "locked": true,
  "border-radius": 15,
  "border-color": "#CCCCCC",
  "border-width": 1,
  "customFields": {
    "custom1": "value1",
    "custom2": "value2"
  }
}

Additional Considerations

Consider the following when working with the Simple Button Schema in Beefree SDK:

• Accessibility: Ensure button text clearly describes its action.

• Consistency: Use padding and border settings to align button style with other components.

• Interactivity: Customize hover states to enhance user experience.

• Extensibility: Use customFields for non-standard properties.