ReferenceComponents

quick_replies

Up to six suggestion chips. Each tap sends a reply.

The next thing to say, offered rather than typed. quick_replies turns the end of an answer into two or three taps: the follow-up questions this answer usually produces, in the user's own words.

It is the cheapest way to keep a conversation moving, and the most common reason a copilot feels like it knows the app rather than the other way round.

Track order 1042Size guideStart a return

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 chips to collect a value. Six chips holding sizes 39 to 44 is a select field wearing a costume; use form.

Do not use them to pick a time, either: times need grouping by day and a booking flow behind them, which is datetime_slots. And do not use them to approve a write: approval is confirm_card, which the server builds so the model cannot misstate what is being approved.

Props

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

PropTypeRequiredConstraints
titlestringNoUp to 80 characters. The line above the replies, e.g. "Where to go from here". The model writes one only for a build that declares answer_pages.
itemsarrayYes1 to 6 entries.
items[].labelstringYes1 to 120 characters. A few words in a thread, where replies are pills in a row.
items[].iconstringNoUp to 40 characters. One emoji, or an info_card icon name. Like title, written only for an answer_pages build.
items[].actionactionYes{ kind: "reply", text } or { kind: "open_url", url }. See Actions.

On the wire

{
  "id": "blk_07",
  "type": "quick_replies",
  "fallback_text": "Track order 1042, size guide, start a return.",
  "props": {
    "items": [
      {
        "label": "Track order 1042",
        "action": {
          "kind": "reply",
          "text": "Where is order 1042?"
        }
      },
      {
        "label": "Size guide",
        "action": {
          "kind": "reply",
          "text": "Show the size guide"
        }
      },
      {
        "label": "Start a return",
        "action": {
          "kind": "reply",
          "text": "I want to return something"
        }
      }
    ]
  }
}

Interaction

A tap fires the chip's action. A reply action posts its text as if the user had typed it, which is why the text should read as something a person would say. An open_url opens the page in an in-app browser, or goes to your RendelConfig.onOpenUrl when you set one; only https is accepted. app_action is not a legal block action: block props are typed as reply | open_url, so a chip carrying one fails validation of the whole request rather than arriving inert. It exists in the wider UIAction union for the day the server stamps one with an invocation_id.

States

StateWhat the SDK draws
LoadingThree pill-shaped placeholders at the real 44pt height, so the thread does not shift when the labels land.
EmptyAn empty items array renders fallback_text instead of an invisible block.
SelectedChips do not hold a selected state. A tap sends a message and the conversation moves on.

Accessibility

Each chip announces its own label and is a 44pt target on both axes, including a one-character label. fallback_text should list the offers, comma-separated, so a screen-reader user who skips the chips still knows what was on offer.