PromptSuggestions
Starter prompts as a wrap of pill buttons — the "Try asking…" row of an empty AI chat
Category: inputs · WCAG 2.2-AA · ai, chat, prompts, suggestions, starters, chips
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | string[] | — | The prompts, as the exact text each one sends. |
onSelect | (value: string) => void | — | Called with the chosen prompt — send it, or put it in the composer. |
labels | { group?: string } | — | Overrides for the component’s user-visible strings (i18n) — `group` names the group for screen readers. |
Design tokens
--cascivo-color-border--cascivo-color-surface--cascivo-color-ai-border--cascivo-color-ai-subtle--cascivo-radius-full--cascivo-focus-ring
When to use
- An empty conversation: offer a few concrete things to ask
- Follow-up suggestions under an assistant reply
When not to use
- Filtering or selecting values — use ToggleGroup, Tag or SegmentedControl
- Autocomplete while typing — use Combobox
How to build an accessible PromptSuggestions in React →
Examples
Starter prompts
<PromptSuggestions
items={['Summarise this week’s tickets', 'Draft a release note', 'What changed in v2?']}
onSelect={() => {}}
/>Related components
- MessageActions — Both sit around an assistant message
- Tag — Tag is for labels and filters, not for sending a prompt