Suggestion
Clickable prompt pill / quick-action chip. Forwards a payload to onSelect on click.
Pick a starter prompt — it'd normally drop into the composer below.
Installation
pnpm
pnpm dlx @hex-core/cli add suggestionAPI Reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Payload sent to onSelect. Defaults to the rendered children when they are a string. |
onSelectrequired | function | — | Called with the payload when the chip is clicked. |
childrenrequired | ReactNode | — | Visible label. |
className | string | — | Additional CSS classes. |
AI Guidance
When to use
Show 3–6 starter prompts before the first turn, or follow-up prompts after an assistant turn. Combine with Cluster for wrap-friendly layout.
When not to use
Don't use for navigation (use Button or a link). Don't auto-send on click without showing the user what's about to be sent — set the value into Composer first.
Common mistakes
- Auto-firing onSelect into useChat.append without populating the input first — feels surprising
- Long labels — these are pills, keep under ~40 chars
Accessibility
Real <button>, so keyboard activation and screen-reader announcement work natively. If the label is non-text, set `aria-label`.
Token budget: 220
Verified against @hex-core/components@1.14.0