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.
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?