A row of tappable prompts to start or steer a conversation
Each suggestion is a clickable chip, so one component owns the pill look. The row scrolls sideways with pure CSS edge fades, wraps into a block for empty-state hero placements, or stacks one per line for narrow columns. Tapping a suggestion fires a callback with its stable id, never its display text.
The row
A single line of suggestions. Icons are optional and the label carries the meaning; keep each prompt short enough to read in a glance.
Size
The default row sits at the body-paragraph scale, so a suggestion reads at the same weight as the message it will become. Compact drops a step for rows that sit alongside a live conversation, where the suggestions are a side offer rather than the main event.
Overflow and fades
When the row overflows, a CSS mask fades the edges out as the hint that there is more to scroll. No scroll listeners, no measurement: the gradient does all the work.
Wrapped
The wrap variant trades scrolling for multiple lines. Use it in an empty conversation, where the suggestions are the main event and everything should be visible at once.
What would you like to do today?
Stacked
One suggestion per line. In a narrow column a wrapped row breaks wherever the labels happen to run out of room, and the ragged edge reads as an accident rather than a list. The pills still hug their labels: stretching them to a shared width would make a set of prompts look like a set of buttons.
Steering mid-conversation
After an answer, a short row of follow-ups keeps the thread moving without making anyone type. The chips read as options, not as messages, because the list sits outside the transcript.