Suggestion

A single prompt suggestion.

Anatomy

One element with optional inline icons and the suggestion text. No internal layout for grouping. The parent picks flex-row, flex-wrap, or flex-col to arrange a set.

API

Reference for the component's available props and behavior.

Suggestion

A button by default, so it is clickable without extra wiring. Pass render to swap the tag, for example to render an anchor inside a list of suggested searches. Inline SVG children are sized automatically, so an icon and its label can sit side by side without per-element class wiring.

Each variant carries its own padding, radius, and color, and the focus ring is the same across all three. The data-variant attribute mirrors the active variant for downstream styling.

Wiring to the composer

Drive a controlled ComposerInput from a parent state. On click, set the state to the suggestion text and the composer reflects it on the next render.