action — wyrd.component.button-group

ButtonGroup

Horizontal composition wrapper that visually joins independent Button and IconButton actions.

Install @wyrd-company/react or the Flutter package and use it directly — your DESIGN.md does the styling.

catalog/contracts/button-group.yml source of truth · verbatim

$schema: https://thewyrdingway.dev/schemas/component-contract.schema.ymlcontractVersion: 0.1.0identity:  name: ButtonGroup  tag: wyrd-button-group  package: wyrd.component.button-group  title: Button Group  summary: Horizontal composition wrapper that visually joins independent Button and IconButton actions.relationships:  related-to:    - quality-parity-and-gatesclassification:  category: action  composition: single-slot  interactive: falsetarget-strategy:  react: required  flutter: requiredsurface:  properties:    - name: label      type:        kind: string      required: true      serializable: true      summary: Required accessible name for the group of actions.  slots:    - name: actions      content: true      required: true      cardinality: one-or-many      accepts:        - component      summary: Independent Button or IconButton actions in visual and focus order.  events: []  states:    - name: default      source: platform      summary: Horizontal group of enabled or independently stateful actions.  parts:    - name: root      summary: Named horizontal action group.      slots:        - actions  tokens:    radius: rounded.md    divider-color: color.outline    divider-width: 1pxmessages: []obligations:  accessibility:    role: group    name: Label property provides the required accessible name.    keyboard:      - Each child retains native keyboard behavior and document-order focus.      - No roving tabindex is introduced because children are independent actions rather than a selection control.    semantics:      - Child Button and IconButton roles, names, disabled states, and loading states remain unchanged.      - Grouping does not imply selection or mutually exclusive state.  behavior:    model: stateless    interactions:      - Child actions own activation and event behavior.      - Adjacent children share visual edges while retaining independent hit targets.    hostEffects: []  conditions:    - rtl    - reduced-motion    - cvd-deuteranopia    - density-compact    - text-expansion  sdui:    status: serializable    serializableProperties:      - label    serializableSlots:      - actions    eventBindings: []    notes: V1 is horizontal. Vertical orientation is a future extension; Toggle Group owns selection-control behavior.examples:  - name: document-actions    state: default    properties:      label: Document workflow actions    slots:      actions: Save draft | Preview | Publish  - name: formatting-actions    state: default    properties:      label: Formatting actions    slots:      actions: Bold | Italic | Linkoverrides:  react:    slots:      actions: children  flutter:    slots:      actions: children

Examples

Generated from the contract's examples block. Previews are the published @wyrd-company/react component, themed by the brand's role tokens — flip the site's light/dark toggle and they follow.

Code target React Flutter Applies to every example on component pages.

document-actions state: default

Usage

import { WyrdButtonGroup } from "@wyrd-company/react";

<WyrdButtonGroup label="Document workflow actions">
  Save draft | Preview | Publish
</WyrdButtonGroup>

import 'package:wyrd_flutter/wyrd_flutter.dart';

WyrdButtonGroup(
  label: 'Document workflow actions',
  child: Text('Save draft | Preview | Publish'),
)

formatting-actions state: default

Usage

import { WyrdButtonGroup } from "@wyrd-company/react";

<WyrdButtonGroup label="Formatting actions">
  Bold | Italic | Link
</WyrdButtonGroup>

import 'package:wyrd_flutter/wyrd_flutter.dart';

WyrdButtonGroup(
  label: 'Formatting actions',
  child: Text('Bold | Italic | Link'),
)

Properties

Name	Type	Default	Summary
`label`	`string`	`undefined`	Required accessible name for the group of actions.

Slots & events

Slot	Cardinality	Accepts	Summary
`actions`	one-or-many	`component`	Independent Button or IconButton actions in visual and focus order.

Tokens

The contract's token bindings. Open the shared contextual sidebar from any example; primary swatches reflect the color you pick there. Error swatches show the active preset's values; editing any knob switches to custom and resets error to TWW · Ink.

Binding	Token
`radius`	`rounded.md`
`divider-color`	`color.outline`
`divider-width`	`1px`

States

State	Source	Summary
`default`	platform	Horizontal group of enabled or independently stateful actions.

SDUI

Status: serializable. V1 is horizontal. Vertical orientation is a future extension; Toggle Group owns selection-control behavior.

Serializable	Members
Properties	`label`
Slots	`actions`
Events	`—`

  The Wyrding Way — a contract-first design system. © Wyrd Company 
   Pipeline demo
 Choose an example to inspect its pipeline context.
 Explore the shape of a brand's pipeline input: presets and knobs regenerate the illustrative excerpt below — not a compilable DESIGN.md (see the format reference). Primary swatches update live; accent, shape, density, and ground are excerpt-only; error swatches are preset-derived until any edit switches to custom (TWW · Ink errors). Component previews use the published brand package and the site's light/dark toggle.
 
  Start from
       
 * homages — shown for range, not affiliation.
 
  Tokens
 Primary updates live swatches. Accent, shape, density, and ground appear in the excerpt only. Error swatches follow the preset until you edit a knob — then they reset to TWW · Ink.
  color.primary   #26221A    color.accent   #9C7C14    rounded.md   2px    density   1.0×    ground     
 
   DESIGN.md excerpt illustrative