Summary
Current Behavior
The value prop only supports strings and RichTextItem objects (bold, italic, etc.). Inserting an icon requires breaking out of the component entirely and using raw Lucide JSX alongside it.
Desired Behavior
<RichTextDisplayField
value={[
{ icon: CheckCircle, color: "POSITIVE", size: "STANDARD" },
" Task completed successfully"
]}
/>
Props for inline icon item
icon — Lucide icon component
color — semantic color (POSITIVE, NEGATIVE, ACCENT, etc.)
size — SMALL / STANDARD / MEDIUM / LARGE
altText — for accessibility
SAIL Reference
Notes
- Icon should be vertically aligned with surrounding text
- Should work inline within paragraphs and alongside other rich text items
Summary
Current Behavior
The
valueprop only supports strings andRichTextItemobjects (bold, italic, etc.). Inserting an icon requires breaking out of the component entirely and using raw Lucide JSX alongside it.Desired Behavior
Props for inline icon item
icon— Lucide icon componentcolor— semantic color (POSITIVE,NEGATIVE,ACCENT, etc.)size—SMALL/STANDARD/MEDIUM/LARGEaltText— for accessibilitySAIL Reference
Notes