action — wyrd.component.toggle

Toggle

Two-state toolbar-style button with persistent pressed state.

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

catalog/contracts/toggle.yml source of truth · verbatim

$schema: https://thewyrdingway.dev/schemas/component-contract.schema.ymlcontractVersion: 0.1.0identity:  name: Toggle  tag: wyrd-toggle  package: wyrd.component.toggle  title: Toggle  summary: Two-state toolbar-style button with persistent pressed state.relationships:  related-to:    - quality-parity-and-gatesclassification:  category: action  composition: multi-slot  interactive: truetarget-strategy:  react: required  flutter: requiredsurface:  properties:    - name: pressed      type:        kind: boolean      required: false      controlled: true      serializable: true      summary: Controlled persistent pressed state.    - name: default-pressed      type:        kind: boolean      required: false      default: false      serializable: true      summary: Initial uncontrolled pressed state.    - name: is-disabled      type:        kind: boolean      required: false      default: false      reflects: true      serializable: true      summary: Prevents activation and exposes disabled platform semantics.  slots:    - name: label      content: true      required: true      cardinality: exactly-one      accepts:        - text        - node      summary: Visible label and accessible-name source.    - name: icon      required: false      cardinality: zero-or-one      accepts:        - icon      summary: Optional icon before the label.  events:    - name: pressed-change      payload:        pressed:          kind: boolean        action:          kind: action-ref      bubbles: true      composed: true      cancelable: false      summary: Canonical event emitted with the requested persistent pressed state.  states:    - name: default      source: platform      summary: Enabled unpressed state.    - name: hover      source: interaction      summary: Pointer hover state on hover-capable devices.    - name: focus-visible      source: platform      summary: Keyboard-visible focus state.    - name: pressed      source: property      summary: Persistent selected state derived from pressed or default-pressed.    - name: disabled      source: property      summary: Disabled state derived from is-disabled.  parts:    - name: root      summary: Interactive platform button root.      slots:        - label        - icon    - name: icon      summary: Optional icon container.      slots:        - icon    - name: label      summary: Label content container.      slots:        - label  tokens:    background: color.surface    foreground: color.on-surface    background-hover: color.secondary    pressed-background: color.secondary    pressed-foreground: color.on-secondary    disabled-background: color.disabled    disabled-foreground: color.on-disabled    radius: rounded.md    padding-x: spacing.md    padding-y: spacing.sm    gap: spacing.sm    label: typography.label-mdmessages: []obligations:  accessibility:    role: button    name: Label slot or aria-label provides the accessible name.    keyboard:      - Enter toggles the button.      - Space toggles the button.    semantics:      - Web projections expose persistent state with aria-pressed on a native button.      - Disabled state is exposed through native disabled semantics where the target has them.  behavior:    model: input    interactions:      - pressed wins over default-pressed when provided.      - Activation requests the inverse pressed state when enabled.      - Controlled activation emits pressed-change without mutating the controlled value.    hostEffects:      - Dispatch pressed-change after accepted activation.      - Bind pressed state to SDUI state when present.  conditions:    - rtl    - reduced-motion    - cvd-deuteranopia    - density-compact    - text-expansion  sdui:    status: serializable    serializableProperties:      - pressed      - default-pressed      - is-disabled    serializableSlots:      - label      - icon    eventBindings:      - pressed-change    notes: Toggle is a pressed button, not a form switch; persistent state serializes independently from activation.examples:  - name: unpressed    state: default    properties: {}    slots:      label: Bold  - name: pressed    state: pressed    properties:      default-pressed: true    slots:      label: Bold  - name: disabled    state: disabled    properties:      is-disabled: true    slots:      label: Bold

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.

unpressed state: default

Usage

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

<WyrdToggle>
  Bold
</WyrdToggle>

// events: onPressedChange

import 'package:wyrd_flutter/wyrd_flutter.dart';

WyrdToggle(
  child: Text('Bold'),
)

// events: onPressedChange

pressed state: pressed

Usage

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

<WyrdToggle defaultPressed>
  Bold
</WyrdToggle>

// events: onPressedChange

import 'package:wyrd_flutter/wyrd_flutter.dart';

WyrdToggle(
  defaultPressed: true,
  child: Text('Bold'),
)

// events: onPressedChange

disabled state: disabled

Usage

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

<WyrdToggle isDisabled>
  Bold
</WyrdToggle>

// events: onPressedChange

import 'package:wyrd_flutter/wyrd_flutter.dart';

WyrdToggle(
  isDisabled: true,
  child: Text('Bold'),
)

// events: onPressedChange

Properties

Name	Type	Default	Summary
`pressed`	`boolean`	`undefined`	Controlled persistent pressed state.
`default-pressed`	`boolean`	`false`	Initial uncontrolled pressed state.
`is-disabled`	`boolean`	`false`	Prevents activation and exposes disabled platform semantics.

Slots & events

Slot	Cardinality	Accepts	Summary
`label`	exactly-one	`text, node`	Visible label and accessible-name source.
`icon`	zero-or-one	`icon`	Optional icon before the label.

Event	Payload	Summary
`pressed-change`	`pressed, action`	Canonical event emitted with the requested persistent pressed state.

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
`background`	`color.surface`
`foreground`	`color.on-surface`
`background-hover`	`color.secondary`
`pressed-background`	`color.secondary`
`pressed-foreground`	`color.on-secondary`
`disabled-background`	`color.disabled`
`disabled-foreground`	`color.on-disabled`
`radius`	`rounded.md`
`padding-x`	`spacing.md`
`padding-y`	`spacing.sm`
`gap`	`spacing.sm`
`label`	`typography.label-md`

States

State	Source	Summary
`default`	platform	Enabled unpressed state.
`hover`	interaction	Pointer hover state on hover-capable devices.
`focus-visible`	platform	Keyboard-visible focus state.
`pressed`	property	Persistent selected state derived from pressed or default-pressed.
`disabled`	property	Disabled state derived from is-disabled.

SDUI

Status: serializable. Toggle is a pressed button, not a form switch; persistent state serializes independently from activation.

Serializable	Members
Properties	`pressed, default-pressed, is-disabled`
Slots	`label, icon`
Events	`pressed-change`

  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

Examples

Properties

Slots & events

Tokens

States

Accessibility

SDUI