feedback — wyrd.component.alert
Non-dismissible status message surface with optional title and icon slots.
Install @wyrd-company/react or the Flutter package and use it directly —
your DESIGN.md does the styling.
$schema: https://thewyrdingway.dev/schemas/component-contract.schema.ymlcontractVersion: 0.1.0identity: name: Alert tag: wyrd-alert package: wyrd.component.alert title: Alert summary: Non-dismissible status message surface with optional title and icon slots.relationships: related-to: - quality-parity-and-gatesclassification: category: feedback composition: multi-slot interactive: falsetarget-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: Primary alert message content. - name: title required: false cardinality: zero-or-one accepts: - text - node summary: Optional short heading for the alert. - name: icon required: false cardinality: zero-or-one accepts: - icon summary: Optional decorative status icon. events: [] states: - name: default source: platform summary: Informational status alert. parts: - name: root summary: Status live-region root. slots: - content - title - icon - name: icon summary: Optional icon slot container. slots: - icon - name: body summary: Alert text column. slots: - title - content tokens: info: background: color.secondary foreground: color.on-secondary border-color: color.primary success: background: color.success-container foreground: color.on-success-container border-color: color.success warning: background: color.warning-container foreground: color.on-warning-container border-color: color.warning danger: background: color.error-container foreground: color.on-error-container border-color: color.error radius: rounded.md padding-x: spacing.md padding-y: spacing.sm gap: spacing.sm border-width: 1px title: typography.label-md content: typography.body-mdmessages: []obligations: accessibility: role: status name: Alert content provides the announced status text. keyboard: [] semantics: - Web projections expose role=status as a polite live region. - Urgent or interruptive alerts are the host application's responsibility to escalate. - The optional icon is decorative unless the host supplies semantic content inside it. behavior: model: stateless interactions: [] hostEffects: [] conditions: - rtl - reduced-motion - cvd-deuteranopia - density-compact - text-expansion sdui: status: serializable serializableProperties: - variant serializableSlots: - content - title - icon eventBindings: [] notes: Alert serializes its variant and slotted content; hosts choose whether a status should be escalated beyond polite status semantics.examples: - name: info state: default properties: variant: info slots: title: Scheduled maintenance content: The component registry will be read-only from 02:00 to 02:30 UTC. - name: success state: default properties: variant: success slots: title: Settings saved content: Your design-system preferences are ready for the next generation run. - name: warning state: default properties: variant: warning slots: title: Unsaved changes content: Save or discard your token edits before switching brands. - name: danger state: default properties: variant: danger slots: title: Deployment failed content: Resolve the contract drift before publishing this release.overrides: react: slots: content: children flutter: slots: content: child
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.
import { WyrdAlert } from "@wyrd-company/react";
<WyrdAlert variant="info" title="Scheduled maintenance">
The component registry will be read-only from 02:00 to 02:30 UTC.
</WyrdAlert>import 'package:wyrd_flutter/wyrd_flutter.dart';
WyrdAlert(
variant: 'info',
title: Text('Scheduled maintenance'),
child: Text('The component registry will be read-only from 02:00 to 02:30 UTC.'),
)import { WyrdAlert } from "@wyrd-company/react";
<WyrdAlert variant="success" title="Settings saved">
Your design-system preferences are ready for the next generation run.
</WyrdAlert>import 'package:wyrd_flutter/wyrd_flutter.dart';
WyrdAlert(
variant: 'success',
title: Text('Settings saved'),
child: Text('Your design-system preferences are ready for the next generation run.'),
)import { WyrdAlert } from "@wyrd-company/react";
<WyrdAlert variant="warning" title="Unsaved changes">
Save or discard your token edits before switching brands.
</WyrdAlert>import 'package:wyrd_flutter/wyrd_flutter.dart';
WyrdAlert(
variant: 'warning',
title: Text('Unsaved changes'),
child: Text('Save or discard your token edits before switching brands.'),
)import { WyrdAlert } from "@wyrd-company/react";
<WyrdAlert variant="danger" title="Deployment failed">
Resolve the contract drift before publishing this release.
</WyrdAlert>import 'package:wyrd_flutter/wyrd_flutter.dart';
WyrdAlert(
variant: 'danger',
title: Text('Deployment failed'),
child: Text('Resolve the contract drift before publishing this release.'),
)| Name | Type | Default | Summary |
|---|---|---|---|
variant | info | success | warning | danger | info | Visual status tone. |
| Slot | Cardinality | Accepts | Summary |
|---|---|---|---|
content | exactly-one | text, node | Primary alert message content. |
title | zero-or-one | text, node | Optional short heading for the alert. |
icon | zero-or-one | icon | Optional decorative status icon. |
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 | |
info.border-color | color.primary | |
success.background | color.success-container | |
success.foreground | color.on-success-container | |
success.border-color | color.success | |
warning.background | color.warning-container | |
warning.foreground | color.on-warning-container | |
warning.border-color | color.warning | |
danger.background | color.error-container | |
danger.foreground | color.on-error-container | |
danger.border-color | color.error | |
radius | rounded.md | |
padding-x | spacing.md | |
padding-y | spacing.sm | |
gap | spacing.sm | |
border-width | 1px | |
title | typography.label-md | |
content | typography.body-md |
| State | Source | Summary |
|---|---|---|
default | platform | Informational status alert. |
From the contract's accessibility obligations. Role status; Alert content provides the announced status text.
Status: serializable. Alert serializes its variant and slotted content; hosts choose whether a status should be escalated beyond polite status semantics.
| Serializable | Members |
|---|---|
| Properties | variant |
| Slots | content, title, icon |
| Events | — |