Base Button Schema - Scanova API Documentation

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

Property	Type	Required	Description
label	`string`	✅ Yes	The text label displayed on the button.
color	`object`	No	Defines the button’s color scheme, including background, border, and text.
├─ button	`string`	No	Button background color (e.g., `#FFFFFF`).
├─ label	`string`	No	Label (text) color. Must be between 2–10 characters.
├─ border	`string`	No	Border color (if applicable).
├─ iconColor	`string`	No	Icon color in HEX format. Must match pattern: `^#([a-fA-F0-9]6
buttonStyle	`object`	No	Reference to shared Button Style Schema.
textStyle	`object`	No	Reference to shared Text Style Schema.
tracking	`object`	No	Reference to Event Tracking Schema used for analytics.

Validation Rules

Field	Constraint	Example
`label`	1–100 characters	`"label": "Download Now"`
`color.label`	2–10 characters	`"label": "#333333"`
`color.iconColor`	Must match HEX pattern	`"#FF5733"`
`color.button`	Must 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"
  }
}