Feedback components

Progress, loading placeholders and empty states.

Generated from the component definitions in src/components, the same source the parser validates against and the model guide is built from. Every element also accepts if=, tip=. Each example below is rendered live by the SayShape engine.

progress

A horizontal bar showing how far a value is toward a maximum.

Prop	Type	Description
value	number, required	Current amount, usually an {expression}.
max	number	The full amount (default 100).
label	string	Optional caption above the bar.
tone	default / muted / accent / good / warn / bad	Color role: default, muted, accent, good, warn or bad.

state done=3
progress value={done} max=5 label="{done} of 5 steps"

Rendered by the SayShape engineOpen in playground

Try progress interactively →

skeleton

A grey placeholder shown while content loads: lines of text, a block or a circle.

Prop	Type	Description
shape	text / block / circle	text (lines), block or circle.
lines	number	How many lines, for shape=text (default 3).
height	number	Height of a block, or diameter of a circle (default 120 and 48).

skeleton lines=2
skeleton shape=block height=80

Rendered by the SayShape engineOpen in playground

Try skeleton interactively →

empty

A friendly message for when there is nothing to show, with an optional button to move on.

Prop	Type	Description
"text"	text, required	The message, e.g. No orders yet.
detail	string	A line explaining what to do next.
action	string	Label for a button under the message.
on	action	Actions to run when the button is pressed, e.g. emit:changed. Separate several with ;

empty "No results" detail="Try a wider price range." action="Clear filters" on=emit:clear_filters

Rendered by the SayShape engineOpen in playground

Try empty interactively →

dialog

A panel over the screen for something that needs an answer or attention first: confirm a delete, a short form, one item's details. It opens when bind= is true, so start that state false and open it from a button, unless it should greet people as the screen opens; its × button, Escape and a press outside it close it.

Prop	Type	Description
"text"	text	The title at its top, e.g. Delete order?
bind	state, required	A true/false state: true shows it, e.g. bind=confirm. Open it with on=set:confirm:true; close it from a button inside with on=set:confirm:false.
size	sm / md / lg	How wide it gets: sm (a question), md (a short form) or lg (details).
on	action	Actions to run when it's closed by its × button, Escape or a press outside it, e.g. emit:changed. Separate several with ;

Children: any elements.

state confirm=true
button "Delete order" variant=danger on=set:confirm:true
dialog "Delete order NW-2041?" bind=confirm size=sm
  text "The order and its invoice are removed. This can't be undone." tone=muted
  row
    button "Cancel" variant=secondary on=set:confirm:false
    button "Delete" variant=danger on="emit:delete;set:confirm:false"

Rendered by the SayShape engineOpen in playground

Try dialog interactively →