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

# Button component schema

> Button Component Defines an interactive button used for navigation, communication, or conditional redirection within QR Code categories. Extends the Base Button Component with additional link and behavior properties.

## Overview

The **Button Component** adds functional capabilities to the [**Base Button**,](/guides/category-components/components/_base_button) allowing it to perform specific actions such as opening a URL, sending an email or SMS, or navigating to a dynamic page.\
It supports **conditional redirects**, enabling personalized behavior based on user attributes like device type, OS, country, or language.

## Properties

| Property       | Type     | Required | Description                                                                                                                                               |
| :------------- | :------- | :------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **link**       | `string` | ✅ Yes    | Target destination for the button action (URL, email, phone, etc.). Minimum: 5, Maximum: 2000 characters.                                                 |
| **type**       | `string` | No       | Defines the type of button action. Supported values: `url`, `email`, `phone`, `sms`, `page`.                                                              |
| **conditions** | `object` | No       | Reference to [Conditional URLs Component](/guides/category-components/components/conditional_urls). Allows device-, region-, or OS-based link variations. |

***

### 🧩 **Inherited from Base Button**

All visual and behavioral properties from the Base Button Component are included, such as:

| Property        | Description                                                                                                               |
| :-------------- | :------------------------------------------------------------------------------------------------------------------------ |
| **label**       | Button text (required).                                                                                                   |
| **color**       | Defines button, label, and border colors.                                                                                 |
| **buttonStyle** | Reference to `style/button.json` for custom button styling.                                                               |
| **textStyle**   | Reference to `style/text.json` for text formatting.                                                                       |
| **tracking**    | Reference to [Event Tracking Component](/guides/category-components/components/event_tracking). Used for click analytics. |

## Used in Categories

This component is used in the following QR Code categories:

* [Coupon](/guides/category-components/categories/coupon)
* [Dynamic Text](/guides/category-components/categories/dynamicText)
* [Event](/guides/category-components/categories/event)
* [Product](/guides/category-components/categories/product)
* [Wedding](/guides/category-components/categories/wedding)

## Schema

<CodeGroup>
  ```json Schema theme={null}
  {
    "$schema": "http://json-schema.org/draft-07/schema#",
    "definitions": {},
    "title": "Button component schema",
    "description": "Schema to validate button component",
    "allOf": [
      {
        "$ref": "_base_button.json"
      },
      {
        "properties": {
          "link": {
            "type": "string",
            "minLength": 5,
            "maxLength": 2000
          },
          "type": {
            "type": "string",
            "enum": [
              "url",
              "email",
              "phone",
              "sms",
              "page"
            ]
          },
          "conditions": {
            "$ref": "conditional_urls.json"
          }
        },
        "required": [
          "link"
        ]
      }
    ]
  }
  ```
</CodeGroup>

## Notes

* The **link** field is always required and must be a valid URL or actionable endpoint.
* Use **conditions** to personalize user experiences (e.g., redirect iOS users to App Store, Android users to Play Store).
* Extends **Base Button Schema** for design and tracking consistency.
* Supports integration with **Event Tracking** for click analytics.