import { WyrdDivider } from "@wyrd-company/react";
<WyrdDivider orientation="horizontal" />import 'package:wyrd_flutter/wyrd_flutter.dart';
WyrdDivider(
orientation: 'horizontal',
)structure — wyrd.component.divider
Divider
Visual separation primitive with horizontal and vertical orientation.
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: Divider tag: wyrd-divider package: wyrd.component.divider title: Divider summary: Visual separation primitive with horizontal and vertical orientation.relationships: related-to: - quality-parity-and-gatesclassification: category: structure composition: leaf interactive: falsetarget-strategy: react: required flutter: requiredsurface: properties: - name: orientation type: kind: enum values: - horizontal - vertical required: false default: horizontal reflects: true serializable: true summary: Separator axis; vertical dividers expose explicit orientation to assistive technology. slots: [] events: [] states: - name: default source: platform summary: Horizontal separator. - name: vertical source: property summary: Vertical separator derived from orientation. parts: - name: root summary: Separator line. tokens: color: color.outline thickness: 1pxmessages: []obligations: accessibility: role: separator keyboard: [] semantics: - Represents a purely visual division. - Vertical separators expose aria-orientation because horizontal is the implicit separator orientation. behavior: model: stateless interactions: [] hostEffects: [] conditions: - rtl - density-compact - text-expansion sdui: status: serializable serializableProperties: - orientation serializableSlots: [] eventBindings: [] notes: Divider serializes its orientation and no slots.examples: - name: default state: default properties: orientation: horizontal slots: {} - name: vertical state: vertical properties: orientation: vertical 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 { WyrdDivider } from "@wyrd-company/react";
<WyrdDivider orientation="vertical" />import 'package:wyrd_flutter/wyrd_flutter.dart';
WyrdDivider(
orientation: 'vertical',
)02
Properties
| Name | Type | Default | Summary |
|---|---|---|---|
orientation | horizontal | vertical | horizontal | Separator axis; vertical dividers expose explicit orientation to assistive technology. |
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 | |
|---|---|---|
color | color.outline | |
thickness | 1px |
04
States
| State | Source | Summary |
|---|---|---|
default | platform | Horizontal separator. |
vertical | property | Vertical separator derived from orientation. |
05
Accessibility
From the contract's accessibility obligations. Role separator
- Represents a purely visual division.
- Vertical separators expose aria-orientation because horizontal is the implicit separator orientation.
- Verified under: rtl, density-compact, text-expansion.
06
SDUI
Status: serializable. Divider serializes its orientation and no slots.
| Serializable | Members |
|---|---|
| Properties | orientation |
| Slots | — |
| Events | — |