> ## Documentation Index
> Fetch the complete documentation index at: https://docs.scanova.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Base Button Schema

> Defines the base structure for all button components. This schema can be extended or customized to include additional fields for color, style, and tracking.

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

### Related Component

> The [**Button Component**](/guides/category-components/components/button) 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](/guides/category-components/components/event_tracking) 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

<CodeGroup>
  ```json Schema theme={null}
  {
    "$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"
      }
    }
  }
  ```
</CodeGroup>

## Example Usage

```json Schema theme={null}
{
  "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"
  }
}
```