Component

StatusPill

A status is a short sentence, not a color.

Inline pills such as Added and Confirmed, and a toast that can be dismissed.

Added

Do

Use a short past-tense word: Added, Confirmed.
Put the toast next to the action that caused it.
Let the person dismiss it.

Don't

Toast every internal step.
Rely on color alone.
Block the transcript with a banner.

Props

Prop	Type	Description
children	ReactNode	The status words.
tone	neutral \| success \| danger \| warning	Color is secondary to the words.
message	string	Toast only. The same words as the pill.
onDismiss	() => void	Toast only.

A2UI message

v0.9.1 envelope. catalogId is latch://catalog/v1. The preview under the message is rendered by the adapter, not hand-built.

JSON

[
  {
    "version": "v0.9.1",
    "createSurface": {
      "surfaceId": "status",
      "catalogId": "latch://catalog/v1"
    }
  },
  {
    "version": "v0.9.1",
    "updateComponents": {
      "surfaceId": "status",
      "components": [
        {
          "id": "root",
          "component": "Row",
          "children": [
            "added",
            "confirmed"
          ]
        },
        {
          "id": "added",
          "component": "StatusPill",
          "label": "Added",
          "tone": "neutral"
        },
        {
          "id": "confirmed",
          "component": "StatusPill",
          "label": "Confirmed",
          "tone": "success",
          "state": "confirmed"
        }
      ]
    }
  }
]

AddedConfirmed