Noora (0.81.4)
- 1.3.0

Button Group

Groups related controls into a compact segmented surface.

ButtonGroup web component

Groups related controls into a compact segmented surface.

Setup 

import "@tuist/noora/tokens.css";
import "@tuist/noora/web-components";

Sizes

Button groups range from small to large.

First Second Third First Second Third First Second Third 
<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.

Previous Both Next Page 1 Page 2 
<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.

Available Disabled Available First Second Third 
<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.

1 2 3 List Grid Card 
<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>

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 json [] 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

Name Description
default Declarative noora-button-group-item children.

Styling parts

Name Description
group The group container.

Behavior

Use noora-button-group-item children for declarative groups.

The items property remains available for data-driven rendering.