feedback — wyrd.component.toast

Toast

Presentational toast surface with variant styling and localized dismiss affordance.

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

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

$schema: https://thewyrdingway.dev/schemas/component-contract.schema.ymlcontractVersion: 0.1.0identity:  name: Toast  tag: wyrd-toast  package: wyrd.component.toast  title: Toast  summary: Presentational toast surface with variant styling and localized dismiss affordance.relationships:  related-to:    - quality-parity-and-gatesclassification:  category: feedback  composition: single-slot  interactive: truetarget-strategy:  react: required  flutter: requiredsurface:  properties:    - name: variant      type:        kind: enum        values:          - info          - success          - warning          - danger      required: false      default: info      reflects: true      serializable: true      summary: Visual status tone.  slots:    - name: content      content: true      required: true      cardinality: exactly-one      accepts:        - text        - node      summary: Toast message content.    - name: icon      required: false      cardinality: zero-or-one      accepts:        - icon      summary: Optional decorative status icon.  events:    - name: dismiss      payload: {}      bubbles: true      composed: true      cancelable: true      summary: Emitted when the user activates the dismiss button.  states:    - name: default      source: platform      summary: Informational toast surface.  parts:    - name: root      summary: Toast status surface.      slots:        - content        - icon    - name: icon      summary: Optional icon slot container.      slots:        - icon    - name: content      summary: Toast message body.      slots:        - content    - name: dismiss      summary: Dismiss button.  tokens:    info:      background: color.secondary      foreground: color.on-secondary    success:      background: color.success-container      foreground: color.on-success-container    warning:      background: color.warning-container      foreground: color.on-warning-container    danger:      background: color.error-container      foreground: color.on-error-container    radius: rounded.md    shadow: shadow.md    padding-x: spacing.md    padding-y: spacing.sm    gap: spacing.smmessages:  - key: toast.dismiss    description: Accessible label for the toast dismiss control.obligations:  accessibility:    role: status    name: Toast content provides the announced status text.    keyboard:      - Tab moves focus to the dismiss control.      - Enter or Space activates the dismiss control when focused.    semantics:      - Web projections expose role=status as a polite live region.      - The dismiss control is a button named by the component-owned localized message.      - The optional icon is decorative unless the host supplies semantic content inside it.  behavior:    model: stateless    interactions:      - Activating the dismiss control emits dismiss.      - Toast v1 is presentational only.    hostEffects:      - Dispatch dismiss event.      - Hosts own toast queueing, placement, lifecycle, and auto-dismiss timing until the overlay-host service exists.  conditions:    - rtl    - reduced-motion    - cvd-deuteranopia    - density-compact    - text-expansion  sdui:    status: serializable    serializableProperties:      - variant    serializableSlots:      - content      - icon    eventBindings:      - dismiss    notes: Toast serializes only the presentational surface, icon, content, variant, and dismiss binding. Queueing, placement, auto-dismiss timing, and overlay host behavior are host responsibilities in v1.examples:  - name: info    state: default    properties:      variant: info    slots:      content: Draft saved.      icon: i  - name: success    state: default    properties:      variant: success    slots:      content: Publish completed.      icon: check  - name: warning    state: default    properties:      variant: warning    slots:      content: Publishing is delayed while validation finishes.      icon: alert  - name: danger    state: default    properties:      variant: danger    slots:      content: Publish failed.      icon: alertoverrides:  react:    slots:      content: children  flutter:    slots:      content: child

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.

info state: default

Usage

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

<WyrdToast variant="info" icon="i">
  Draft saved.
</WyrdToast>

// events: onDismiss

import 'package:wyrd_flutter/wyrd_flutter.dart';

WyrdToast(
  variant: 'info',
  child: Text('Draft saved.'),
  icon: Text('i'),
)

// events: onDismiss

success state: default

Usage

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

<WyrdToast variant="success" icon="check">
  Publish completed.
</WyrdToast>

// events: onDismiss

import 'package:wyrd_flutter/wyrd_flutter.dart';

WyrdToast(
  variant: 'success',
  child: Text('Publish completed.'),
  icon: Text('check'),
)

// events: onDismiss

warning state: default

Usage

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

<WyrdToast variant="warning" icon="alert">
  Publishing is delayed while validation finishes.
</WyrdToast>

// events: onDismiss

import 'package:wyrd_flutter/wyrd_flutter.dart';

WyrdToast(
  variant: 'warning',
  child: Text('Publishing is delayed while validation finishes.'),
  icon: Text('alert'),
)

// events: onDismiss

danger state: default

Usage

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

<WyrdToast variant="danger" icon="alert">
  Publish failed.
</WyrdToast>

// events: onDismiss

import 'package:wyrd_flutter/wyrd_flutter.dart';

WyrdToast(
  variant: 'danger',
  child: Text('Publish failed.'),
  icon: Text('alert'),
)

// events: onDismiss

Properties

Name	Type	Default	Summary
`variant`	`info \| success \| warning \| danger`	`info`	Visual status tone.

Slots & events

Slot	Cardinality	Accepts	Summary
`content`	exactly-one	`text, node`	Toast message content.
`icon`	zero-or-one	`icon`	Optional decorative status icon.

Event	Payload	Summary
`dismiss`	`—`	Emitted when the user activates the dismiss button.

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
`info.background`	`color.secondary`
`info.foreground`	`color.on-secondary`
`success.background`	`color.success-container`
`success.foreground`	`color.on-success-container`
`warning.background`	`color.warning-container`
`warning.foreground`	`color.on-warning-container`
`danger.background`	`color.error-container`
`danger.foreground`	`color.on-error-container`
`radius`	`rounded.md`
`shadow`	`shadow.md`
`padding-x`	`spacing.md`
`padding-y`	`spacing.sm`
`gap`	`spacing.sm`

States

State	Source	Summary
`default`	platform	Informational toast surface.

SDUI

Status: serializable. Toast serializes only the presentational surface, icon, content, variant, and dismiss binding. Queueing, placement, auto-dismiss timing, and overlay host behavior are host responsibilities in v1.

Serializable	Members
Properties	`variant`
Slots	`content, icon`
Events	`dismiss`

  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