status_banner

Something happened, or something is about to. status_banner is the one filled plate in the catalog, because it interrupts rather than records: a promo applied, stock running out, a payment that did not go through.

Tone is carried by the glyph and by emphasis, never by inventing a green and a red the host never mapped.

Only two pairs left in size 44Trail Circuit restocks in about three weeks.

Re-rendered in the browser from the SDK’s own scales. Not a screenshot.

Rendered natively by the Flutter SDK and the Web SDK, both since 0.1.0.

When not to use it

Do not use it for content. A banner is a notice about state; a fact with a name on it is info_card, which is the same shape without the interruption.

Do not use an error banner to ask for approval either. Approval is confirm_card, built server-side, and a banner has no buttons at all.

Props

Every block also carries type and a required fallback_text of 1 to 300 characters.

Prop	Type	Required	Constraints
`tone`	`success` \| `info` \| `warning` \| `error`	Yes	None
`title`	string	Yes	1 to 120 characters.
`body`	string	No	Up to 400 characters.

On the wire

{
  "id": "blk_17",
  "type": "status_banner",
  "fallback_text": "Only two pairs left in size 44.",
  "props": {
    "tone": "warning",
    "title": "Only two pairs left in size 44",
    "body": "Trail Circuit restocks in about three weeks."
  }
}

Interaction

None. A banner has no CTA by design: if there is something to do about it, the block after it should say so.

States

State	What the SDK draws
Loading	A glyph placeholder with a title bar and two body lines, in the banner's own proportions.
Unknown tone	Falls back to `info` rather than dropping the glyph.

Accessibility

Tone is not colour-only. warning and error take the accent glyph, success reads at full ink and info stays quiet, and each tone has a distinct glyph, so the difference survives both a colour-blind reader and a screen reader.

fallback_text should be the title. A banner's title is already written as the whole message.