Text

Readable output and inline styling.

Text

The Text component displays plain or styled strings. It is the base primitive for readable output and supports properties like color, bold, italic and underline.

<text content="Hello Cascade" color="#0a8e6f" bold />

You can embed inline spans for rich styling by passing an array of segments. Each segment can have its own properties.

<text content={[{ text: "Error: ", color: "red", bold: true }, { text: "file not found", italic: true }]} />

For log-like output, prefer short lines and keep heavy formatting (bold/underline) for status tags. This tends to remain readable across terminal themes.

<text
  content={[
    { text: "[0012] ", color: "#565f89" },
    { text: "INFO ", color: "#9ece6a", bold: true },
    { text: "Connected to server", color: "#c0caf5" },
  ]}
/>

Props

Prop	Type	Common usage
`content`	`string \| segments`	Plain string, or an array of styled segments for rich text.
`color`	`ColorInput`	Foreground/text color (hex, named color, RGBA, etc.).
`bold`	`boolean`	Use sparingly for labels and status tags.
`italic`	`boolean`	Good for hints and secondary metadata.
`underline`	`boolean`	Useful for links or active items (don’t overuse).

Tip: when building “status lines”, prefer a fixed palette (e.g. gray timestamp + colored tag + message). This scales well for logs and diagnostics.

Recipes

Recipe: status bar with left/right alignment (place text nodes inside a flex row container).

<box flexDirection="row" justifyContent="space-between" height={1} width="100%">
  <text content={"Connected"} color="#9ece6a" />
  <text content={"Ctrl+C to quit"} color="#565f89" />
</box>

Recipe: inline emphasis using children (React/Solid bindings).

<text>
  <span fg="#7aa2f7">blue</span>
  <span> and </span>
  <strong>bold</strong>
  <span> text</span>
</text>