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.

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.

Last updated

Was this helpful?