ObjectUIComponentsBasic
Span (Deprecated)
Inline container - use Badge or text components instead
⚠️ Deprecated Component
The Span component is deprecated. Please use Shadcn components instead:
- For badges/labels: use
badgecomponent - For inline text emphasis: use
textcomponent with appropriate className
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.
Migration Guide
Instead of using span, use these Shadcn alternatives:
For Badges → Use badge
Default Badge
{
"type": "badge",
"variant": "default",
"children": [
{
"type": "text",
"content": "Badge Style"
}
]
}Secondary Badge
{
"type": "badge",
"variant": "secondary",
"children": [
{
"type": "text",
"content": "Secondary"
}
]
}For Status Indicators → Use badge with variants
Status Badges
{
"type": "flex",
"gap": 2,
"children": [
{
"type": "badge",
"variant": "default",
"children": [
{
"type": "text",
"content": "● Active"
}
]
},
{
"type": "badge",
"variant": "secondary",
"children": [
{
"type": "text",
"content": "● Pending"
}
]
},
{
"type": "badge",
"variant": "destructive",
"children": [
{
"type": "text",
"content": "● Inactive"
}
]
}
]
}For Inline Text → Use text with className
Text Component
{
"type": "text",
"content": "The quick brown fox jumps over the lazy dog.",
"className": "text-base"
}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
body?: SchemaNode | SchemaNode[]; // Alternative content prop
// Styling
className?: string; // Tailwind CSS classes
// Base properties
id?: string;
visible?: boolean | string;
testId?: string;
}