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
docs/components/buttongroup.md
<!-- Generated by scripts/generate-web-components.js. Do not edit directly. -->
# ButtonGroup
Groups related controls into a compact segmented surface.
```html
<noora-button-group>
<noora-button-group-item value="day">Day</noora-button-group-item>
<noora-button-group-item value="week">Week</noora-button-group-item>
</noora-button-group>
```
## 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<Record<string, unknown>>` | `[]` | 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<string, unknown>; 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
<noora-button-group size="small">
<noora-button-group-item>First</noora-button-group-item>
<noora-button-group-item>Second</noora-button-group-item>
<noora-button-group-item>Third</noora-button-group-item>
</noora-button-group>
<noora-button-group size="medium">
<noora-button-group-item>First</noora-button-group-item>
<noora-button-group-item>Second</noora-button-group-item>
<noora-button-group-item>Third</noora-button-group-item>
</noora-button-group>
<noora-button-group size="large">
<noora-button-group-item>First</noora-button-group-item>
<noora-button-group-item>Second</noora-button-group-item>
<noora-button-group-item>Third</noora-button-group-item>
</noora-button-group>
```
## Icon configurations
Compare labeled controls with icons, icon-only controls, and a mixture of both.
```html
<noora-button-group size="medium">
<noora-button-group-item icon-left="chevron_left">Previous</noora-button-group-item>
<noora-button-group-item icon-left="chevron_left" icon-right="chevron_right">Both</noora-button-group-item>
<noora-button-group-item icon-right="chevron_right">Next</noora-button-group-item>
</noora-button-group>
<noora-button-group size="medium">
<noora-button-group-item icon="chevron_left" icon-only aria-label="Previous"></noora-button-group-item>
<noora-button-group-item icon="chevron_right" icon-only aria-label="Next"></noora-button-group-item>
</noora-button-group>
<noora-button-group size="medium">
<noora-button-group-item icon="chevron_left" icon-only aria-label="Previous"></noora-button-group-item>
<noora-button-group-item>Page 1</noora-button-group-item>
<noora-button-group-item>Page 2</noora-button-group-item>
<noora-button-group-item icon="chevron_right" icon-only aria-label="Next"></noora-button-group-item>
</noora-button-group>
```
## States
Compare a partially disabled group with a fully disabled group.
```html
<noora-button-group size="medium">
<noora-button-group-item>Available</noora-button-group-item>
<noora-button-group-item disabled>Disabled</noora-button-group-item>
<noora-button-group-item>Available</noora-button-group-item>
</noora-button-group>
<noora-button-group size="medium">
<noora-button-group-item disabled>First</noora-button-group-item>
<noora-button-group-item disabled>Second</noora-button-group-item>
<noora-button-group-item disabled>Third</noora-button-group-item>
</noora-button-group>
```
## Practical examples
Use groups for pagination controls and view switching.
```html
<noora-button-group size="medium">
<noora-button-group-item icon="chevron_left" icon-only aria-label="Previous"></noora-button-group-item>
<noora-button-group-item selected>1</noora-button-group-item>
<noora-button-group-item>2</noora-button-group-item>
<noora-button-group-item>3</noora-button-group-item>
<noora-button-group-item icon="chevron_right" icon-only aria-label="Next"></noora-button-group-item>
</noora-button-group>
<noora-button-group size="small">
<noora-button-group-item selected>List</noora-button-group-item>
<noora-button-group-item>Grid</noora-button-group-item>
<noora-button-group-item>Card</noora-button-group-item>
</noora-button-group>
```