{
    "title": "Navigation Button Configuration",
    "description": "A navigation button widget for in-dashboard navigation between pages or sections. Use this widget to create clickable buttons that navigate users to different dashboard views, external pages, or perform back navigation. Supports Material Design icons and customizable styling. Ideal for creating navigation flows, back buttons, call-to-action links, or any clickable element that should route users to another location.",
    "aiSelection": {
        "dataShape": "A single destination: a label, an icon and a route, plus optional route variables. No data input.",
        "useWhen": [
            "One clickable element should take the user somewhere — a detail page, an external site, or back.",
            "A call to action belongs next to specific content rather than in a navigation menu."
        ],
        "notFor": [
            "Several destinations that belong together as a menu — use widget-navbar or widget-sidenav.",
            "A button that writes or submits data — use widget-form.",
            "A button that commands a device — use widget-switch, or widget-scada for an industrial symbol.",
            "Per-row links inside a list of records — use widget-table with a column of type 'button'."
        ]
    },
    "type": "object",
    "properties": {
        "title": {
            "title": "Label",
            "description": "The text displayed on the button. Should be short and action-oriented (e.g., 'Go Back', 'View Details', 'Open Settings').",
            "order": 1,
            "type": "string"
        },
        "iconName": {
            "title": "Icon Name",
            "order": 2,
            "description": "Material icon name displayed alongside the label. Find icon names at https://fonts.google.com/icons (e.g., 'arrow_back', 'open_in_new', 'settings', 'home').",
            "dataDrivenDisabled": true,
            "type": "string"
        },
        "route": {
            "title": "Navigation",
            "order": 3,
            "description": "The destination path when the button is clicked. Leave blank to perform automatic browser back navigation. Supports two dynamic substitution mechanisms: (1) Variable placeholders using double curly braces — define variables in the 'Variables' array below and reference them as {{variableName}} in the route string (e.g., '/device/{{deviceId}}/details' where a variable with label 'deviceId' provides the value). (2) Wildcard segments using a single asterisk '*' as a full path segment — each '*' is replaced at runtime by the segment at the same position from the current browser route (e.g., '/*/settings' navigates to the settings page while preserving the first segment of the current URL). The '*' must be the entire segment to be substituted; partial wildcards like 'test*' are treated as literal text. Routes starting with '/' are absolute; routes without a leading slash are relative to the current location.",
            "type": "string"
        },
        "variables": {
            "title": "Navigation Variables",
            "description": "Array of variable definitions for dynamic route segment substitution. Each variable has a label (used in the route string as {{label}}) and a value (the replacement text). Values can be static or bound to data columns for real-time updates.",
            "type": "array",
            "dataDrivenDisabled": true,
            "order": 4,
            "items": {
                "type": "object",
                "properties": {
                    "label": {
                        "title": "Label",
                        "description": "The variable name used in the route string. Reference this in your route using the {{label}} syntax. Use descriptive names like 'temperature', 'status', 'deviceName'.",
                        "type": "string",
                        "order": 1
                    },
                    "value": {
                        "title": "Value",
                        "description": "The replacement text that will appear in place of {{label}} in the rendered output. Can be a static value or bound to a data column for dynamic updates.",
                        "type": "string",
                        "order": 2
                    }
                }
            }
        },
        "style": {
            "title": "Button Style",
            "description": "Visual styling options for the button appearance.",
            "order": 6,
            "type": "object",
            "properties": {
                "fontSize": {
                    "title": "Font Size",
                    "order": 1,
                    "description": "Font size in pixels for the button label text.",
                    "dataDrivenDisabled": true,
                    "type": "number"
                },
                "color": {
                    "title": "Font Color",
                    "description": "Text color for the button label and icon.",
                    "order": 4,
                    "type": "color",
                    "dataDrivenDisabled": true
                },
                "backgroundColor": {
                    "title": "Background Color",
                    "description": "Background fill color of the button.",
                    "order": 4,
                    "type": "color",
                    "dataDrivenDisabled": true
                }
            }
        }
    }
}