Span (Deprecated)

The Span component is an inline container. It is now deprecated in favor of semantic Shadcn-based components that provide better accessibility and design system integration.

Scope of this deprecation: JSON-authored pages. A kind:'html' page is written as constrained JSX text that the engine compiles (parses, never executes) into nodes, tag name straight through — there, the plain inline tag is part of that tier's own vocabulary and stays fully supported, because no other spelling of it exists for an author to migrate to. The dev-build deprecation notice is therefore reported for JSON-authored nodes only, and never for what the html tier compiled from its own source.

Styling on that tier is the blocks' own structured props (<flex direction gap>, <grid columns>) plus a JSON style object — not Tailwind utility classes, which produce no CSS at all when authored in page source. os validate reports that as page-source-className-tailwind. See the React Pages guide, §Styling.

Migration Guide

Instead of using span, use these Shadcn alternatives:

For Badges → Use badge

For Status Indicators → Use badge with variants

For Inline Text → Use text with className

Old Examples (Deprecated)

Below are the old span examples. Please migrate to the alternatives shown above.

Schema

// ⚠️ DEPRECATED - Use Badge or Text components instead
interface SpanSchema {
  type: 'span';
  
  // Content
  value?: string;                        // Text content
  children?: SchemaNode | SchemaNode[];  // Child components (the child key this component reads)
  // Both keys are read. When both are authored, child content wins and `value`
  // is ignored (the richer key renders, the scalar does not).
  
  // Styling
  className?: string;                    // Tailwind CSS classes
  
  // Base properties
  id?: string;
  visible?: boolean | string | { dialect?: string; source: string };
  testId?: string;
}

Legacy Examples (For Reference Only)