{
"type": "object",
"properties": {
"type": {
"const": "Button",
"default": "Button",
"type": "string"
},
"id": {
"type": [
"string",
"null"
],
"default": null,
"description": "HTML id attribute for CSS targeting. Applied to the outermost element."
},
"cssClass": {
"type": [
"string",
"null"
],
"default": null,
"description": "CSS/Tailwind classes for styling. Accepts a Responsive() for breakpoint-aware classes."
},
"label": {
"description": "Button text",
"type": "string"
},
"icon": {
"type": [
"string",
"null"
],
"default": null,
"description": "Lucide icon name (kebab-case, e.g. 'arrow-right')"
},
"variant": {
"anyOf": [
{
"enum": [
"default",
"destructive",
"outline",
"secondary",
"ghost",
"link",
"success",
"warning",
"info"
],
"type": "string"
},
{
"type": "string"
}
],
"default": "default",
"description": "Visual variant: default, destructive, outline, secondary, ghost, link, success, warning, info"
},
"size": {
"default": "default",
"description": "Size: default, xs, sm, lg, icon, icon-xs, icon-sm, icon-lg",
"enum": [
"default",
"xs",
"sm",
"lg",
"icon",
"icon-xs",
"icon-sm",
"icon-lg"
],
"type": "string"
},
"buttonType": {
"enum": [
"submit",
"button",
"reset"
],
"type": [
"string",
"null"
],
"default": null,
"description": "HTML button type: 'submit' (default in forms), 'button' (no form submit), or 'reset'. Use 'button' for cancel/close actions inside a Form."
},
"disabled": {
"anyOf": [
{
"type": "boolean"
},
{
"type": "string"
}
],
"default": false,
"description": "Whether the button is disabled"
},
"onClick": {
"$ref": "Action",
"description": "Action(s) to execute when clicked",
"default": null
}
},
"required": [
"type",
"label"
]
}