callout

The one thing to notice in an answer: a key finding, a warning or a next step.

Spec · edit me

No problems. The parser accepted every line.

Result · try itOpen in playground

Tweak the props"text"detail

tone

icon

Props

"text"textThe takeaway, in one short sentence. May include {expressions}. Long text wraps.required

detailstringAn optional second line in muted text, e.g. what the finding is based on.—

toneinfo · accent · good · warn · badinfo (default, the accent color) for a finding, good for good news, warn for something to watch, bad for a problem. accent is the same as info.info

iconbooleanShow a small icon matching the tone: i, a tick, ! or ×.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 callout, generated from the same definition.

  callout "<text>"  — The one thing to notice in an answer: a key finding, a warning or a next step.
    "<text>" (required)  The takeaway, in one short sentence. May include {expressions}. Long text wraps.
    detail=<string>  An optional second line in muted text, e.g. what the finding is based on.
    tone=<info|accent|good|warn|bad>  info (default, the accent color) for a finding, good for good news, warn for something to watch, bad for a problem. accent is the same as info.
    icon=<boolean>  Show a small icon matching the tone: i, a tick, ! or ×.
    example:
      callout "Rock is 47% of revenue" detail="Up from 41% last year" icon=true