Suggestions
betaPrompt suggestion chips for a chat's empty state or follow-ups, arriving from the centre of the row outwards.
- AI
- 1 file
- 1 npm package
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add ai-suggestionsnpm packages installed: class-variance-authority.
import { Suggestions } from "@/components/ui/ai-suggestions";Default
Gallery
<Suggestions>
| Prop | Type | Default |
|---|---|---|
suggestions (required) | SuggestionItem[] | — |
disabledDisables every chip, e.g. while a response streams. | boolean | false |
labelVisible heading, e.g. "Follow-ups". Also names the list. | string | — |
onSelectCalled with the whole suggestion. Prefer filling the composer over sending. | (suggestion: SuggestionItem) => void | — |
variant | "outline" | "soft" | "outline" |
Plus every attribute of <div> except onSelect.
A list of real buttons, named by the visible heading (aria-labelledby) or "Suggestions". Every chip is in the tab order with the shared focus ring. The entrance stagger is decoration and does not run under reduced motion. Selecting hands the suggestion back; filling the composer rather than sending keeps it editable.
7/7
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — does not apply
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes