Suggestion

A suggested follow-up prompt: a pill-shaped button.

import { Suggestion } from '@basiiik/ui';

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

import { Suggestion } from '@basiiik/ui';

<Suggestion>Show me the Modal spec</Suggestion>

Hover is CSS; Focused is :focus-visible on the native button; Disabled uses the disabled attribute.
Storybook: Agents/Suggestion.

Props

Prop	Type	Notes
`children`	native attribute
`disabled`	native attribute
`onClick`	native attribute

States. Hover is CSS; Focused is :focus-visible on the native button; Disabled uses the disabled attribute.

Native attributes such as className, id and data-* are forwarded to the root element.

Parts

`Suggestions`

A named list of Suggestions from an array of strings. onSelect gets the text of the one pressed: send it, or put it in the prompt box. aria-label defaults to "Suggested follow-ups".

<Suggestions items={['Show me the Modal spec', 'Make it dark mode']} onSelect={(text) => console.log(text)} />

Suggestions props

Prop	Type	What it does
`items` required	`string[]`	The suggested prompts, as the text that will be sent.
`onSelect` required	`(text: string) => void`	Called with the text of the suggestion that was pressed.
`aria-label`	`string`	Accessible name of the list. Default "Suggested follow-ups".
`disabled`	`boolean`

Use it when

Suggested follow-up prompts after an answer
Starter prompts on an empty chat
Quick-reply buttons: suggested follow-up prompts the person can send in one press

Do not use it when

Choosing one value from a set (use Chip or Radio)
The main action of a form (use Button)

Rules for agents

Use Suggestions with items and onSelect for a row of them
On select either send the text or put it in the PromptInput; do the same for all
Offer two to four, each a complete prompt the agent can act on
Remove them once the person has typed something of their own

Avoid

Chips as follow-up prompts (a Chip is a selectable filter)
Long suggestions that wrap to several lines
Suggestions that do not make sense on their own

Writing the content

Write them as the person would: "Show me the Modal spec", not "Modal spec?"
Sentence case, no trailing full stop

Keyboard

Tab moves between suggestions
Enter and Space press the focused one

Accessibility

Real buttons in a named list ("Suggested follow-ups")
Disabled uses the disabled attribute

Colour tokens it reads

color.bg.disabledcolor.bg.subtlecolor.bg.surfacecolor.border.focuscolor.border.inputcolor.border.input-hovercolor.border.subtlecolor.text.disabledcolor.text.primary

agents 4 Figma variants Try it in the live demo