Packages
noora
0.86.0
0.86.0
0.85.0
0.84.1
0.84.0
0.83.2
0.83.1
0.83.0
0.82.7
0.82.6
0.82.5
0.82.4
0.82.3
0.82.2
0.82.1
0.82.0
0.81.4
0.81.3
0.81.2
0.81.1
0.81.0
0.80.1
0.80.0
0.79.1
0.79.0
0.78.1
0.78.0
0.77.4
0.77.3
0.77.2
0.77.1
0.77.0
0.76.0
0.75.0
0.74.0
0.73.0
0.72.0
0.71.0
0.70.0
0.69.1
0.69.0
0.68.0
0.67.0
0.66.0
0.65.0
0.64.2
0.64.1
0.64.0
0.63.2
0.63.1
0.63.0
0.62.0
0.61.0
0.60.0
0.59.0
0.58.0
0.57.0
0.56.1
0.56.0
0.55.0
0.54.0
0.53.1
0.53.0
0.52.1
0.52.0
0.51.0
0.50.1
0.50.0
0.49.0
0.48.0
0.47.0
0.46.0
0.45.0
0.44.3
0.44.2
0.44.1
0.44.0
0.43.0
0.42.0
0.41.0
0.40.6
0.40.5
0.40.4
0.40.3
0.40.2
0.40.1
0.40.0
0.39.1
0.39.0
0.38.0
0.37.0
0.36.0
0.35.0
0.34.0
0.33.0
0.32.1
0.32.0
0.31.0
0.30.0
0.29.2
0.29.1
0.29.0
0.28.5
0.28.4
0.28.3
0.28.2
0.28.1
0.28.0
0.27.0
0.26.1
0.26.0
0.25.0
0.24.0
0.23.1
0.23.0
0.22.1
0.22.0
0.21.0
0.20.0
0.19.0
0.18.0
0.17.0
0.16.0
0.15.0
0.14.0
0.13.0
0.12.1
0.12.0
0.11.2
0.11.1
0.11.0
0.10.0
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.0
0.1.0
0.1.0-rc.2
0.1.0-rc.1
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
A component library for Phoenix LiveView applications
Current section
Files
Jump to
Current section
Files
components/button-group.json
{
"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": "<noora-button-group>\n <noora-button-group-item value=\"day\">Day</noora-button-group-item>\n <noora-button-group-item value=\"week\">Week</noora-button-group-item>\n</noora-button-group>",
"attributes": [
{
"name": "size",
"property": "size",
"type": "string",
"values": ["small", "medium", "large"],
"default": "medium",
"description": "Controls child dimensions."
}
],
"properties": [
{
"name": "items",
"type": "json",
"typescriptType": "Array<Record<string, unknown>>",
"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<string, unknown>; 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": "<noora-button-group size=\"small\">\n <noora-button-group-item>First</noora-button-group-item>\n <noora-button-group-item>Second</noora-button-group-item>\n <noora-button-group-item>Third</noora-button-group-item>\n</noora-button-group>\n<noora-button-group size=\"medium\">\n <noora-button-group-item>First</noora-button-group-item>\n <noora-button-group-item>Second</noora-button-group-item>\n <noora-button-group-item>Third</noora-button-group-item>\n</noora-button-group>\n<noora-button-group size=\"large\">\n <noora-button-group-item>First</noora-button-group-item>\n <noora-button-group-item>Second</noora-button-group-item>\n <noora-button-group-item>Third</noora-button-group-item>\n</noora-button-group>"
},
{
"id": "icons",
"title": "Icon configurations",
"description": "Compare labeled controls with icons, icon-only controls, and a mixture of both.",
"markup": "<noora-button-group size=\"medium\">\n <noora-button-group-item icon-left=\"chevron_left\">Previous</noora-button-group-item>\n <noora-button-group-item icon-left=\"chevron_left\" icon-right=\"chevron_right\">Both</noora-button-group-item>\n <noora-button-group-item icon-right=\"chevron_right\">Next</noora-button-group-item>\n</noora-button-group>\n\n<noora-button-group size=\"medium\">\n <noora-button-group-item icon=\"chevron_left\" icon-only aria-label=\"Previous\"></noora-button-group-item>\n <noora-button-group-item icon=\"chevron_right\" icon-only aria-label=\"Next\"></noora-button-group-item>\n</noora-button-group>\n\n<noora-button-group size=\"medium\">\n <noora-button-group-item icon=\"chevron_left\" icon-only aria-label=\"Previous\"></noora-button-group-item>\n <noora-button-group-item>Page 1</noora-button-group-item>\n <noora-button-group-item>Page 2</noora-button-group-item>\n <noora-button-group-item icon=\"chevron_right\" icon-only aria-label=\"Next\"></noora-button-group-item>\n</noora-button-group>"
},
{
"id": "states",
"title": "States",
"description": "Compare a partially disabled group with a fully disabled group.",
"markup": "<noora-button-group size=\"medium\">\n <noora-button-group-item>Available</noora-button-group-item>\n <noora-button-group-item disabled>Disabled</noora-button-group-item>\n <noora-button-group-item>Available</noora-button-group-item>\n</noora-button-group>\n\n<noora-button-group size=\"medium\">\n <noora-button-group-item disabled>First</noora-button-group-item>\n <noora-button-group-item disabled>Second</noora-button-group-item>\n <noora-button-group-item disabled>Third</noora-button-group-item>\n</noora-button-group>"
},
{
"id": "practical",
"title": "Practical examples",
"description": "Use groups for pagination controls and view switching.",
"markup": "<noora-button-group size=\"medium\">\n <noora-button-group-item icon=\"chevron_left\" icon-only aria-label=\"Previous\"></noora-button-group-item>\n <noora-button-group-item selected>1</noora-button-group-item>\n <noora-button-group-item>2</noora-button-group-item>\n <noora-button-group-item>3</noora-button-group-item>\n <noora-button-group-item icon=\"chevron_right\" icon-only aria-label=\"Next\"></noora-button-group-item>\n</noora-button-group>\n\n<noora-button-group size=\"small\">\n <noora-button-group-item selected>List</noora-button-group-item>\n <noora-button-group-item>Grid</noora-button-group-item>\n <noora-button-group-item>Card</noora-button-group-item>\n</noora-button-group>"
}
]
}