[ { "description": "Component for performing an action upon activation (e.g. when clicked).\n\nDepending on the declared props, this component can function as a hyperlink or as a button.", "displayName": "Button", "methods": [], "props": { "size": { "defaultValue": { "value": "medium" }, "description": "Size of the component.", "name": "size", "required": false, "type": { "name": "enum", "raw": "Size", "value": [ { "value": "\"small\"" }, { "value": "\"medium\"" }, { "value": "\"large\"" } ] } }, "variant": { "defaultValue": { "value": "outline" }, "description": "Variant of the component.", "name": "variant", "required": false, "type": { "name": "enum", "raw": "Variant", "value": [ { "value": "\"outline\"" }, { "value": "\"primary\"" } ] } }, "children": { "defaultValue": null, "description": "Text to identify the action associated upon activation of the component.", "name": "children", "required": false, "type": { "name": "any" } }, "disabled": { "defaultValue": { "value": false }, "description": "Can the component be activated?", "name": "disabled", "required": false, "type": { "name": "boolean" } }, "element": { "defaultValue": { "value": "button" }, "description": "The corresponding HTML element of the component.", "name": "element", "required": false, "type": { "name": "enum", "raw": "ButtonElement", "value": [ { "value": "\"a\"" }, { "value": "\"button\"" } ] } }, "href": { "defaultValue": null, "description": "The URL of the page to navigate to, if `element` is set to `\"a\"`.", "name": "href", "required": false, "type": { "name": "string" } }, "target": { "defaultValue": null, "description": "The target on where to display the page navigated to, if `element` is set to `\"a\"`.", "name": "target", "required": false, "type": { "name": "string" } }, "rel": { "defaultValue": null, "description": "The relationship of the current page to the referred page in `href`, if `element` is set to `\"a\"`.", "name": "rel", "required": false, "type": { "name": "string" } }, "type": { "defaultValue": { "value": "button" }, "description": "The type of the button, if `element` is set to `\"button\"`.", "name": "type", "required": false, "type": { "name": "enum", "raw": "ButtonType", "value": [ { "value": "\"button\"" }, { "value": "\"submit\"" }, { "value": "\"reset\"" } ] } }, "border": { "defaultValue": { "value": false }, "description": "Does the button display a border?", "name": "border", "required": false, "type": { "name": "boolean" } }, "onClick": { "defaultValue": null, "description": "Event handler triggered when the component is clicked.", "name": "onClick", "required": false, "type": { "name": "(...args: any[]) => any" } }, "onFocus": { "defaultValue": null, "description": "Event handler triggered when the component receives focus.", "name": "onFocus", "required": false, "type": { "name": "(...args: any[]) => any" } }, "onBlur": { "defaultValue": null, "description": "Event handler triggered when the component loses focus.", "name": "onBlur", "required": false, "type": { "name": "(...args: any[]) => any" } } } }, { "description": "Component for values that have an on/off state.", "displayName": "Checkbox", "methods": [], "props": { "onFocus": { "defaultValue": null, "description": "Event handler triggered when the component receives focus.", "name": "onFocus", "required": false, "type": { "name": "(...args: any[]) => any" } }, "onBlur": { "defaultValue": null, "description": "Event handler triggered when the component loses focus.", "name": "onBlur", "required": false, "type": { "name": "(...args: any[]) => any" } }, "label": { "defaultValue": { "value": "" }, "description": "Short textual description indicating the nature of the component's value.", "name": "label", "required": false, "type": { "name": "any" } }, "name": { "defaultValue": null, "description": "Name of the form field associated with this component.", "name": "name", "required": false, "type": { "name": "string" } }, "onChange": { "defaultValue": null, "description": "Event handler triggered when the component is toggled.", "name": "onChange", "required": false, "type": { "name": "(...args: any[]) => any" } }, "value": { "defaultValue": null, "description": "Value of the component.", "name": "value", "required": false, "type": { "name": "any" } }, "checked": { "defaultValue": null, "description": "Checked state of the component.", "name": "checked", "required": false, "type": { "name": "boolean" } } } }, { "description": "Component for displaying graphics.", "displayName": "Icon", "methods": [], "props": { "size": { "defaultValue": { "value": "1.5rem" }, "description": "Size of the icon. This controls both the width and the height.", "name": "size", "required": false, "type": { "name": "ReactText" } }, "label": { "defaultValue": { "value": null }, "description": "Description of what the component represents.", "name": "label", "required": false, "type": { "name": "string" } }, "name": { "defaultValue": null, "description": "Name of the icon to display.", "name": "name", "required": false, "type": { "name": "string" } }, "weight": { "defaultValue": { "value": "0.125rem" }, "description": "Width of the icon's strokes.", "name": "weight", "required": false, "type": { "name": "ReactText" } } } }, { "description": "Component for values which are to be selected from a few list of options.", "displayName": "RadioButton", "methods": [], "props": { "onFocus": { "defaultValue": null, "description": "Event handler triggered when the component receives focus.", "name": "onFocus", "required": false, "type": { "name": "(...args: any[]) => any" } }, "onBlur": { "defaultValue": null, "description": "Event handler triggered when the component loses focus.", "name": "onBlur", "required": false, "type": { "name": "(...args: any[]) => any" } }, "label": { "defaultValue": { "value": "" }, "description": "Short textual description indicating the nature of the component's value.", "name": "label", "required": false, "type": { "name": "any" } }, "name": { "defaultValue": null, "description": "Group where the component belongs.", "name": "name", "required": false, "type": { "name": "string" } }, "onChange": { "defaultValue": null, "description": "Event handler triggered when the component is selected.", "name": "onChange", "required": false, "type": { "name": "(...args: any[]) => any" } }, "value": { "defaultValue": null, "description": "Value of the component.", "name": "value", "required": false, "type": { "name": "any" } }, "checked": { "defaultValue": null, "description": "Checked state of the component.", "name": "checked", "required": false, "type": { "name": "boolean" } } } }, { "description": "Component for selecting values from a larger number of options.", "displayName": "Select", "methods": [], "props": { "size": { "defaultValue": { "value": "medium" }, "description": "Size of the component.", "name": "size", "required": false, "type": { "name": "enum", "raw": "Size", "value": [ { "value": "\"small\"" }, { "value": "\"medium\"" }, { "value": "\"large\"" } ] } }, "disabled": { "defaultValue": { "value": false }, "description": "Is the component active?", "name": "disabled", "required": false, "type": { "name": "boolean" } }, "border": { "defaultValue": { "value": false }, "description": "Does the button display a border?", "name": "border", "required": false, "type": { "name": "boolean" } }, "onFocus": { "defaultValue": null, "description": "Event handler triggered when the component receives focus.", "name": "onFocus", "required": false, "type": { "name": "(...args: any[]) => any" } }, "onBlur": { "defaultValue": null, "description": "Event handler triggered when the component loses focus.", "name": "onBlur", "required": false, "type": { "name": "(...args: any[]) => any" } }, "label": { "defaultValue": { "value": "" }, "description": "Short textual description indicating the nature of the component's value.", "name": "label", "required": false, "type": { "name": "any" } }, "name": { "defaultValue": null, "description": "Name of the form field associated with this component.", "name": "name", "required": false, "type": { "name": "string" } }, "onChange": { "defaultValue": null, "description": "Event handler triggered when the component changes value.", "name": "onChange", "required": false, "type": { "name": "(...args: any[]) => any" } }, "value": { "defaultValue": null, "description": "Value of the component.", "name": "value", "required": false, "type": { "name": "any" } }, "hint": { "defaultValue": { "value": "" }, "description": "Short textual description as guidelines for valid input values.", "name": "hint", "required": false, "type": { "name": "any" } }, "multiple": { "defaultValue": { "value": false }, "description": "Can multiple values be selected?", "name": "multiple", "required": false, "type": { "name": "boolean" } }, "defaultValue": { "defaultValue": null, "description": "Default value of the component.", "name": "defaultValue", "required": false, "type": { "name": "any" } } } }, { "description": "Component for inputting numeric values in a graphical manner.\n\nThe component is styled using client-side scripts. When the component is rendered server-side,\nthe component falls back into the original `` element.", "displayName": "Slider", "methods": [], "props": { "disabled": { "defaultValue": { "value": false }, "description": "Is the component active?", "name": "disabled", "required": false, "type": { "name": "boolean" } }, "label": { "defaultValue": { "value": "" }, "description": "Short textual description indicating the nature of the component's value.", "name": "label", "required": false, "type": { "name": "any" } }, "onChange": { "defaultValue": null, "description": "Event handler triggered when the component changes value.", "name": "onChange", "required": false, "type": { "name": "(...args: any[]) => any" } }, "value": { "defaultValue": null, "description": "Value of the component.", "name": "value", "required": false, "type": { "name": "any" } }, "defaultValue": { "defaultValue": null, "description": "Default value of the component.", "name": "defaultValue", "required": false, "type": { "name": "any" } }, "orientation": { "defaultValue": { "value": "horizontal" }, "description": "The component orientation.", "name": "orientation", "required": false, "type": { "name": "enum", "raw": "Orientation", "value": [ { "value": "\"vertical\"" }, { "value": "\"horizontal\"" } ] } }, "length": { "defaultValue": { "value": "16rem" }, "description": "CSS size for the component length.", "name": "length", "required": false, "type": { "name": "ReactText" } }, "fallback": { "defaultValue": { "value": false }, "description": "Use the sSR-friendly rendering of the component.", "name": "fallback", "required": false, "type": { "name": "boolean" } } } }, { "description": "Component for inputting textual values.\n\nThis component supports multiline input and adjusts its layout accordingly.", "displayName": "TextInput", "methods": [], "props": { "size": { "defaultValue": { "value": "medium" }, "description": "Size of the component.", "name": "size", "required": false, "type": { "name": "enum", "raw": "Size", "value": [ { "value": "\"small\"" }, { "value": "\"medium\"" }, { "value": "\"large\"" } ] } }, "disabled": { "defaultValue": { "value": false }, "description": "Is the component active?", "name": "disabled", "required": false, "type": { "name": "boolean" } }, "border": { "defaultValue": { "value": false }, "description": "Does the button display a border?", "name": "border", "required": false, "type": { "name": "boolean" } }, "onFocus": { "defaultValue": null, "description": "Event handler triggered when the component receives focus.", "name": "onFocus", "required": false, "type": { "name": "(...args: any[]) => any" } }, "onBlur": { "defaultValue": null, "description": "Event handler triggered when the component loses focus.", "name": "onBlur", "required": false, "type": { "name": "(...args: any[]) => any" } }, "label": { "defaultValue": { "value": "" }, "description": "Short textual description indicating the nature of the component's value.", "name": "label", "required": false, "type": { "name": "any" } }, "onChange": { "defaultValue": null, "description": "Event handler triggered when the component changes value.", "name": "onChange", "required": false, "type": { "name": "(...args: any[]) => any" } }, "value": { "defaultValue": null, "description": "Value of the component.", "name": "value", "required": false, "type": { "name": "any" } }, "hint": { "defaultValue": { "value": "" }, "description": "Short textual description as guidelines for valid input values.", "name": "hint", "required": false, "type": { "name": "any" } }, "defaultValue": { "defaultValue": null, "description": "Default value of the component.", "name": "defaultValue", "required": false, "type": { "name": "any" } }, "indicator": { "defaultValue": { "value": null }, "description": "Additional description, usually graphical, indicating the nature of the component's value.", "name": "indicator", "required": false, "type": { "name": "ReactNodeLike" } }, "multiline": { "defaultValue": { "value": false }, "description": "Should the component accept multiple lines of input?", "name": "multiline", "required": false, "type": { "name": "boolean" } }, "autoResize": { "defaultValue": { "value": false }, "description": "Should the component resize itself to show all its value?", "name": "autoResize", "required": false, "type": { "name": "boolean" } }, "placeholder": { "defaultValue": { "value": "" }, "description": "Placeholder of the component when there is no value.", "name": "placeholder", "required": false, "type": { "name": "string" } }, "rows": { "defaultValue": { "value": 3 }, "description": "How many rows should the component display if it accepts multiline input?", "name": "rows", "required": false, "type": { "name": "number" } }, "alternate": { "defaultValue": { "value": false }, "description": "Should the component be displayed with an alternate appearance?", "name": "alternate", "required": false, "type": { "name": "boolean" } } } } ]