Design Atlas
한국어
✧ AI interface patterns

Suggestion chips

제안 칩

Short pill-shaped buttons under a response that can be tapped to send them as the next message.

Also known as: Follow-up suggestionsQuick repliesPrompt chips
···
html
<div class="chat">
  <div class="bubble ai">React와 Vue는 상태 관리 방식이 다릅니다. Vue는 반응형 객체를 기본 제공하고, React는 훅으로 명시적으로 관리해요.</div>
  <div class="chips" id="chips">
    <button class="chip">더 자세히</button>
    <button class="chip">예시 코드로</button>
    <button class="chip">표로 비교</button>
  </div>
</div>
css
.chat{width:min(300px,94%);display:grid;gap:9px}
.bubble{padding:9px 12px;border-radius:12px;border-bottom-left-radius:4px;background:var(--surface);border:1px solid var(--line);color:var(--fg);font-size:11.5px;line-height:1.55}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--accent);font-size:11px;font-weight:600;cursor:pointer;transition:transform .15s,background .15s}
.chip[data-active]{background:var(--accent);color:#fff;border-color:var(--accent);transform:scale(.96)}
js
const chips = [...document.querySelectorAll('.chip')];
let i = 0;
function pulse() {
  chips.forEach((c) => c.removeAttribute('data-active'));
  chips[i % chips.length].setAttribute('data-active', '');
  setTimeout(() => chips[i % chips.length].removeAttribute('data-active'), 420);
  i++;
}
pulse();
setInterval(pulse, 1700);

This exists to shorten the moment of staring at an empty input box wondering what to type. Based on what the model just answered, it proposes natural follow-ups — "Go deeper," "Give an example," "Summarize as a table" — that the user can send with a tap instead of typing.

The default behavior is: tapping a chip sends that exact phrase as the user's message immediately. You could instead just fill the input box and let the user review or edit it first, but that turns one click into two. Either is fine as long as it's consistent.

Two to four chips is a reasonable range. More than that turns picking one into its own decision (Hick's law), and long phrases wrap onto a second line and look messy — keep them short enough to fit on one.

When to use

Show it right after a response, when several natural next directions exist. Skip it after a question with only one right follow-up, like a yes/no answer.