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>