import { WyrdSkeleton } from "@wyrd-company/react";
<WyrdSkeleton variant="text" />import 'package:wyrd_flutter/wyrd_flutter.dart';
WyrdSkeleton(
variant: 'text',
)feedback — wyrd.component.skeleton
Skeleton
Decorative placeholder shape used while loading content; loading announcements belong to status/live-region components.
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: Skeleton tag: wyrd-skeleton package: wyrd.component.skeleton title: Skeleton summary: Decorative placeholder shape used while loading content; loading announcements belong to status/live-region components.relationships: related-to: - quality-parity-and-gatesclassification: category: feedback composition: leaf interactive: falsetarget-strategy: react: required flutter: requiredsurface: properties: - name: variant type: kind: enum values: - text - circle - rect required: false default: text reflects: true serializable: true summary: Placeholder geometry. slots: [] events: [] states: - name: default source: platform summary: Text-line placeholder. parts: - name: root summary: Decorative placeholder shape. tokens: base-color: color.surface-container highlight-color: color.surface radius: rounded.smmessages: []obligations: accessibility: role: none keyboard: [] semantics: - Web projections set aria-hidden="true". - Flutter projection excludes the placeholder from semantics. - Loading state is announced by Spinner or live-region components, not by skeletons. behavior: model: stateless interactions: [] hostEffects: [] conditions: - rtl - reduced-motion - density-compact sdui: status: serializable serializableProperties: - variant serializableSlots: [] eventBindings: [] notes: Skeleton serializes only its decorative shape variant.examples: - name: text state: default properties: variant: text slots: {} - name: circle state: default properties: variant: circle slots: {} - name: rect state: default properties: variant: rect slots: {}01
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.
import { WyrdSkeleton } from "@wyrd-company/react";
<WyrdSkeleton variant="circle" />import 'package:wyrd_flutter/wyrd_flutter.dart';
WyrdSkeleton(
variant: 'circle',
)import { WyrdSkeleton } from "@wyrd-company/react";
<WyrdSkeleton variant="rect" />import 'package:wyrd_flutter/wyrd_flutter.dart';
WyrdSkeleton(
variant: 'rect',
)02
Properties
| Name | Type | Default | Summary |
|---|---|---|---|
variant | text | circle | rect | text | Placeholder geometry. |
03
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 | |
|---|---|---|
base-color | color.surface-container | |
highlight-color | color.surface | |
radius | rounded.sm |
04
States
| State | Source | Summary |
|---|---|---|
default | platform | Text-line placeholder. |
05
Accessibility
From the contract's accessibility obligations. Role none
- Web projections set aria-hidden="true".
- Flutter projection excludes the placeholder from semantics.
- Loading state is announced by Spinner or live-region components, not by skeletons.
- Verified under: rtl, reduced-motion, density-compact.
06
SDUI
Status: serializable. Skeleton serializes only its decorative shape variant.
| Serializable | Members |
|---|---|
| Properties | variant |
| Slots | — |
| Events | — |