# ButtonGroup Groups related controls into a compact segmented surface. ```html Day Week ``` ## Attributes | Attribute | Type or allowed values | Default | Description | | --- | --- | --- | --- | | `size` | `small`, `medium`, `large` | `"medium"` | Controls child dimensions. | ## Properties | Property | Type or allowed values | Default | Description | | --- | --- | --- | --- | | `items` | `Array>` | `[]` | Defines group items programmatically when declarative noora-button-group-item children are not used. | ## Events | Event | Type | Description | | --- | --- | --- | | `noora-select` | `CustomEvent<{ index: number; item: Record; value: unknown }>` | Emitted when an enabled group item is selected. | ## Slots | Slot | Description | | --- | --- | | `default` | Declarative noora-button-group-item children. | ## Styling parts | Part | Description | | --- | --- | | `group` | The group container. | Use noora-button-group-item children for declarative groups. The items property remains available for data-driven rendering. ## Sizes Button groups range from small to large. ```html First Second Third First Second Third First Second Third ``` ## Icon configurations Compare labeled controls with icons, icon-only controls, and a mixture of both. ```html Previous Both Next Page 1 Page 2 ``` ## States Compare a partially disabled group with a fully disabled group. ```html Available Disabled Available First Second Third ``` ## Practical examples Use groups for pagination controls and view switching. ```html 1 2 3 List Grid Card ```