text

A paragraph or heading that wraps to the available width. Use {expressions} to show state.

Spec · edit me

No problems. The parser accepted every line.

Result · try itOpen in playground

Tweak the props"text"

style

weight

tone

align

strike

icon

rich

Props

"text"textThe words to show. May include {expressions}.required

styledisplay · title · lead · body · captiondisplay, title, lead, body or caption.body

weightregular · semibold · boldregular, semibold or bold. Titles default to semibold.—

tonedefault · muted · accent · good · warn · badColor role: default, muted, accent, good, warn or bad.default

alignleft · center · rightleft, center or right.left

strikebooleanDraw a line through the text, e.g. for an old price.false

iconstringAn icon before the text, by name from icon's list, e.g. icon=check-circle.—

richbooleantrue reads inline formatting in the words: **bold**, *italic*, `code` and links [words](https://…). A link is pressed by the person and sent to you as emit:link with its address; SayShape never opens it. One paragraph per text line.false

ifconditionShow only when this expression is true, e.g. if=done or if={count>0}. Every element takes it.—

tipstringA short explanation shown on hover, keyboard focus or a tap, e.g. tip="Orders not yet shipped": for a term or a number some people won't know, instead of more words on screen. It makes the element a Tab stop if it isn't one. Every element takes it.—

For your model

The exact guide entry a model gets for text, generated from the same definition.

  text "<text>"  — A paragraph or heading that wraps to the available width. Use {expressions} to show state.
    "<text>" (required)  The words to show. May include {expressions}.
    style=<display|title|lead|body|caption>  display, title, lead, body or caption.
    weight=<regular|semibold|bold>  regular, semibold or bold. Titles default to semibold.
    tone=<default|muted|accent|good|warn|bad>  Color role: default, muted, accent, good, warn or bad.
    align=<left|center|right>  left, center or right.
    strike=<boolean>  Draw a line through the text, e.g. for an old price.
    icon=<string>  An icon before the text, by name from icon's list, e.g. icon=check-circle.
    rich=<boolean>  true reads inline formatting in the words: **bold**, *italic*, `code` and links [words](https://…). A link is pressed by the person and sent to you as emit:link with its address; SayShape never opens it. One paragraph per text line.
    example:
      state guests=2 nights=3
      text "Weekend in Yosemite" style=title
      text "{guests} guests, {nights} nights" tone=muted
      text "$160" tone=muted strike=true
      text "Payment received" icon=check-circle tone=good
      text "**Free** cancellation until *2 days* before; see [the terms](https://northwind.example/terms)." rich=true