Suggestion Chips
A horizontal row of follow-up prompts users can send in one tap.
Suggestion Chips
Basic Usage
Suggestion Chips
Loading demo...
Vertical Follow-up List
layout="list" turns the chips into rule-separated rows led by a return arrow, each arriving a beat after the one above it. This is the shape a settled answer ends on: follow-ups as a list you can finish reading, rather than a rail you have to drag sideways.
Follow-ups in a streaming answer
Once the prose finishes, the stacked sources and the follow-up list become usable together.
Loading demo...
Interaction Contract
layout="list"changes the arrangement only. Data and events are untouched:selectstill carries the whole suggestion object.- Rows in the list layout stagger in by position, 90ms apart. Reduced motion drops the entrance entirely while the rows themselves still render.
- The rule is drawn on each row's bottom border, including the last one — that matches upstream, and the screenshots.
- Nothing renders when
suggestionsis empty, so there is no need to wrap the component in your ownv-if. - Each chip is keyed by
suggestion.id; keep ids unique within a set. - Clicking emits
selectwith the whole suggestion object, not an index or an id. - The component holds no selection state and does not remove a suggestion after it is tapped — clearing the list is the consumer's call.
- The row scrolls horizontally when it overflows. The scrollbar is hidden and both edges are masked so the overflow reads as scrollable rather than clipped.
- The container is
role="list"and each chip isrole="listitem". That overrides the implicit<button>semantics, so screen readers announce a list item rather than a button. Supply surrounding text if button semantics matter for your surface.
API
Props
| Name | Type | Default | Description |
|---|---|---|---|
suggestions | AiSuggestion[] | — | The suggestions to render, where AiSuggestion is { id: string, text: string }. Required. |
layout | 'wrap' | 'list' | 'wrap' | list stacks them into rule-separated rows with a return glyph. |
Events
| Name | Payload | Description |
|---|---|---|
select | (suggestion: AiSuggestion) | Emitted when a chip is clicked, carrying that suggestion. |
Slots
TxSuggestionChips exposes no slots. Chip labels come from suggestion.text; use a custom implementation if you need rich content.
Best Practices
- Offer three to five suggestions. The row scrolls beyond that, but options past the fold are rarely tapped.
- Word them the way a user would speak ("Add unit tests"), not as feature names ("Test generation").
- Clear or replace the list after a tap so the same prompt cannot be sent twice.
- Use stable ids rather than the label text, so analytics and de-duplication survive copy changes.