Follow ups | Lime design system

Examples

Under an answer

You spent $320 on dining in May, $40 more than April.

Next steps

When to use it

Use: Under the last answer in a conversation, to suggest what to ask next.
Use: After a result, to offer edits the assistant can make.
Use: Where the person might not know what the assistant can do next.
Not for: Filters or topics the person toggles. Use Chip.
Not for: A choice that sets a value. Use Segmented.
Not for: Actions on an answer, such as copy. Put them in the actions of Message. Use Message.

8 rules

Must: Send the suggestion text as the next request on press; do not only fill the box. Because the person then has to find Send and press again for text they already chose.
Must: Remove the row or replace it with the new answer's once the next request is sent. Because old suggestions under a new answer send questions that are already settled.
Should: Write each suggestion as a short sentence that stands alone, such as Move it every Friday.
Never: Use generic prompts such as Tell me more; write suggestions that use what is in the answer. Because "Tell me more" fits any answer, so it saves the person no typing.
Must: Pass the best three. Because the row slices to three, so a fourth and fifth vanish without a message.
Should: Mount the row only when the answer is complete; unmount it while a request runs.
Should: Ignore a second onSelect call or remove the row; the component has no pressed state.
Must: Filter empty strings out of suggestions. Because an empty string draws a blank pill that sends an empty request.

4 checks

: The row is role group named "Suggested follow ups"; each suggestion is a button.
: Tab moves through the suggestions; Enter and Space send.
: Focus shows the 2px olive ring; hover and focus can show together.
: Pills are 32px tall; hover only fires on devices that can hover.

6 edge cases

Long suggestion: Wraps inside its pill, which grows taller and stays start-aligned.
Narrow to 120px: Each suggestion takes its own row; never scrolls sideways.
Right to left: Pills start at the right and align text to the start.
Send fails: The row stays so the person can retry; it keeps no state.
Inside a form: The buttons are type button and do not submit.
Forced colors: The pills keep their 1px border.

4 props

11 tokens