Suggestion Chips | Tuff Docs

Usage

Loading demo...

layout="list" turns the chips into rule-separated rows, each led by a return arrow.

Loading demo...

Offer three to five suggestions.
Word them as a user would say them ("Add unit tests"), not as feature names ("Test generation").
Clear or replace the list after a tap so the same prompt can't be sent twice.
Use stable ids rather than the label text, so analytics and de-duplication survive copy changes.
End a settled answer with layout="list".

Name	Type	Default	Description
`suggestions`	`AiSuggestion[]`	—	The suggestions, each `{ id: string, text: string }`. Required.
`layout`	`'wrap' \| 'list'`	`'wrap'`	`list` stacks them into rule-separated rows with a return glyph.

Name	Payload	Description
`select`	`(suggestion: AiSuggestion)`	Fires when a chip is clicked, with the whole suggestion.

Nothing renders when suggestions is empty.
Each chip is keyed by id; keep ids unique within a set.
The component holds no selection state and doesn't remove a suggestion after a tap.
wrap scrolls horizontally on overflow, with a hidden scrollbar and edge masks that signal the overflow.
list rows stagger in by position, 90ms apart; under reduced motion they simply appear.
The container is role="list" and each chip role="listitem", which overrides the button semantics; add surrounding text where button semantics matter.