Follow-ups | Glaze design system

Layout

When to use it

Use: Under the newest finished agent turn, to offer the likely next prompts.
Use: After a result the agent can change: "Refund the other two", "Email the customer".
Use: In an empty thread, as starting prompts (layout="rows").
Not for: Filters a person turns on and off. Use Chip.
Not for: Actions on the answer itself, such as copy or retry. Use Toolbar.
Not for: A yes or no the agent is waiting on. Use Tool call.

7 rules

Must: Send the text as the next prompt in onSelect; never only fill the composer. Because the person chose the words already, and filling the box makes them find Send and press again.
Must: Render follow-ups only under the newest finished turn; remove them once a prompt is sent. Because old suggestions under an earlier turn send prompts the thread has moved past.
Should: Pass disabled while a reply runs, if the row stays on screen.
Never: Offer prompts that fit any answer, such as Tell me more. Because a generic prompt saves no typing and says nothing about what the agent can do next.
Should: Write each one as the person would type it, in the first person and imperative.
Should: Use layout="chips" for prompts of a few words and layout="rows" for prompts that run to a sentence. Because a chip ends a long prompt in an ellipsis, and rows wrap it.
Never: Make a follow-up glass or a primary Button. Because a suggestion is an offer, and the composer's Send is the one lead in a thread.

5 states, highest first

4 checks

: role="group" named "Suggested follow-ups"; each suggestion is a button named by its full text.
: Tab moves between suggestions; Enter and Space send.
: A chip takes the small focus ring; a row draws the ring inside its edge, since rows touch.
: A truncated chip keeps its full text as its name and its title.

2 keys

6 edge cases

More than max: The first max show; the rest are cut.
No suggestions: Renders nothing.
Long prompt as a chip: Ends in an ellipsis at the row's width.
Long prompt as a row: Wraps; the arrow stays on the first line.
Right to left: Chips start at the right; text aligns to the start.
Dark theme: Chips turn near-black with a light hairline; rows take the light wash.

6 props

15 tokens