{
"name": "ButtonGroup",
"tagName": "noora-button-group",
"elementClassName": "NooraButtonGroup",
"className": "noora-button-group",
"modulePath": "./priv/static/noora-web-components.js",
"description": "Groups related controls into a compact segmented surface.",
"usage": "\n Day\n Week\n",
"attributes": [
{
"name": "size",
"property": "size",
"type": "string",
"values": ["small", "medium", "large"],
"default": "medium",
"description": "Controls child dimensions."
}
],
"properties": [
{
"name": "items",
"type": "json",
"typescriptType": "Array>",
"default": [],
"description": "Defines group items programmatically when declarative noora-button-group-item children are not used."
}
],
"readonlyProperties": [],
"slots": [
{
"name": "",
"description": "Declarative noora-button-group-item children."
}
],
"cssParts": [
{
"name": "group",
"description": "The group container."
}
],
"events": [
{
"name": "noora-select",
"type": "CustomEvent<{ index: number; item: Record; value: unknown }>",
"description": "Emitted when an enabled group item is selected."
}
],
"notes": [
"Use noora-button-group-item children for declarative groups.",
"The items property remains available for data-driven rendering."
],
"examples": [
{
"id": "sizes",
"title": "Sizes",
"description": "Button groups range from small to large.",
"markup": "\n First\n Second\n Third\n\n\n First\n Second\n Third\n\n\n First\n Second\n Third\n"
},
{
"id": "icons",
"title": "Icon configurations",
"description": "Compare labeled controls with icons, icon-only controls, and a mixture of both.",
"markup": "\n Previous\n Both\n Next\n\n\n\n \n \n\n\n\n \n Page 1\n Page 2\n \n"
},
{
"id": "states",
"title": "States",
"description": "Compare a partially disabled group with a fully disabled group.",
"markup": "\n Available\n Disabled\n Available\n\n\n\n First\n Second\n Third\n"
},
{
"id": "practical",
"title": "Practical examples",
"description": "Use groups for pagination controls and view switching.",
"markup": "\n \n 1\n 2\n 3\n \n\n\n\n List\n Grid\n Card\n"
}
]
}