Button Group

Preview

<esa-button-group>
  <EsaButton variant="primary">Day</EsaButton>
  <EsaButton variant="primary">Week</EsaButton>
  <EsaButton variant="primary">Month</EsaButton>
</esa-button-group>

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@esa/ecology/esa-button-group';

@Component({
  selector: 'app-button-group-demo',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <esa-button-group>
      <button type="button">Day</button>
      <button type="button">Week</button>
      <button type="button">Month</button>
    </esa-button-group>
  `,
})
export class ButtonGroupDemo {}

The group has no size of its own — set size on each child button, alongside its variant. The group only connects the borders.

Modes

selection-mode="none" is the default — buttons are visually connected but each acts independently.

<esa-button-group selection-mode="none">
  <EsaButton variant="primary">Day</EsaButton>
  <EsaButton variant="primary">Week</EsaButton>
  <EsaButton variant="primary">Month</EsaButton>
</esa-button-group>

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@esa/ecology/esa-button-group';

@Component({
  selector: 'app-button-group-modes-demo',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <esa-button-group selection-mode="none">
      <button type="button">Day</button>
      <button type="button">Week</button>
      <button type="button">Month</button>
    </esa-button-group>
  `,
})
export class ButtonGroupModesDemo {}

selection-mode="single" turns the group into a segmented control. One child stays active; give each child a data-value and listen for the change event.

<esa-button-group selection-mode="single" value="week">
  <button class="seg-btn" data-value="day">Day</button>
  <button class="seg-btn" data-value="week">Week</button>
  <button class="seg-btn" data-value="month">Month</button>
</esa-button-group>

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@esa/ecology/esa-button-group';

@Component({
  selector: 'app-button-group-demo',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <esa-button-group selection-mode="single" value="week">
      <button class="seg-btn" data-value="day">Day</button>
      <button class="seg-btn" data-value="week">Week</button>
      <button class="seg-btn" data-value="month">Month</button>
    </esa-button-group>
  `,
})
export class ButtonGroupDemo {}

API

Events

Accessibility

• The host sets role="group" automatically on connect.
• In single mode the active child receives aria-pressed="true" and a data-selected attribute for styling; the rest get aria-pressed="false".
• The change event is composed and bubbles, so it crosses shadow boundaries and can be caught on the host or an ancestor.
• Slotted children remain real <button> elements — keyboard focus and activation come for free.

Theming surface

Every public token this component reads, extracted from its source at build time, split by blast radius: the hooks that belong to this component, then the shared and system tokens it consumes alongside everything else. The Resolves to column walks each token's real lineage — component → semantic → primitive → raw value — so you can see exactly where re-pointing it lands. A spoke re-skins by overriding these in its theme-<slug>.css; component internals are never edited. No hook for what you need? File it with /request-lego.

Type roles it names

This component does not set a size, weight, face or tracking of its own — it names a composite, and the composite carries all five. A composite is a class rather than a token, so none of it appears in the tables below; re-theme text by re-pointing the token family, not by editing the component.

Wired to this component

None. This component has no hooks of its own — it themes entirely through the shared tokens below, so every override here also moves its siblings.

Shared tokens it reads

Owned by a family or by the semantic layer. Still overridable — but scope the override (esa-foo { --form-border-color: … }) unless you mean to move everything that reads it. Reach says what else that is.