Skip to main content

​
Overview

The Base Button Schema serves as a reusable foundation for button components within QR Code landing pages or category templates.
It standardizes button text, colors, styles, and event tracking, while allowing developers to extend it for specific use cases such as CTA buttons, share buttons, or custom action buttons.
The Button Component extends this base schema to add functional properties such as link, type, and conditions.
Use it when defining interactive buttons that perform actions like redirects, emails, or conditional routing.

​
Properties

PropertyTypeRequiredDescription
labelstring✅ YesThe text label displayed on the button.
colorobjectNoDefines the button’s color scheme, including background, border, and text.
├─ buttonstringNoButton background color (e.g., #FFFFFF).
├─ labelstringNoLabel (text) color. Must be between 2–10 characters.
├─ borderstringNoBorder color (if applicable).
├─ iconColorstringNoIcon color in HEX format. Must match pattern: `^#([a-fA-F0-9]6
buttonStyleobjectNoReference to shared Button Style Schema.
textStyleobjectNoReference to shared Text Style Schema.
trackingobjectNoReference to Event Tracking Schema used for analytics.

​
Validation Rules

FieldConstraintExample
label1–100 characters"label": "Download Now"
color.label2–10 characters"label": "#333333"
color.iconColorMust match HEX pattern"#FF5733"
color.buttonMust be valid CSS color"button": "#1A73E8"

​

​
Example Schema

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "definitions": {},
  "title": "Base button schema",
  "description": "This schema can be extended to add additional fields",
  "type": "object",
  "required": [
    "label"
  ],
  "properties": {
    "label": {
      "type": "string",
      "minLength": 1,
      "maxLength": 100
    },
    "color": {
      "type": "object",
      "required": [],
      "additionalProperties": false,
      "properties": {
        "button": {
          "type": "string"
        },
        "label": {
          "type": "string",
          "minLength": 2,
          "maxLength": 10
        },
        "border": {
          "type": "string"
        },
        "iconColor": {
          "type": "string",
          "pattern": "^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$",
          "description": "Button icon color"
        }
      }
    },
    "buttonStyle": {
      "$ref": "style/button.json"
    },
    "textStyle": {
      "$ref": "style/text.json"
    },
    "tracking": {
      "$ref": "event_tracking.json"
    }
  }
}

​
Example Usage

Schema
{
  "label": "View Details",
  "color": {
    "button": "#1A73E8",
    "label": "#FFFFFF",
    "border": "#0F5BB5",
    "iconColor": "#FFFFFF"
  },
  "buttonStyle": {
    "borderRadius": "8px",
    "padding": "12px 20px"
  },
  "textStyle": {
    "fontWeight": "bold",
    "fontSize": "16px"
  },
  "tracking": {
    "event": "button_click",
    "category": "CTA",
    "label": "View Details Button"
  }
}