7onicDESIGN SYSTEM

QuickReply

QuickReply는 채팅 UI와 AI 어시스턴트에서 미리 정의된 답변 후보를 칩 형태로 표시하는 컴포넌트입니다. 사용자는 한 번의 탭으로 답변을 전송하여 대화를 자연스럽게 이어갈 수 있습니다.

3
Variants
3
Sizes
2
Layouts
Pure
React

Playground

Preview
outlinescrolldefault
Variant
Layout
Size
Radius
Color
Gap
Options
<QuickReply aria-label="Quick replies">
  <QuickReplyItem>About payment</QuickReplyItem>
  <QuickReplyItem>Shipping info</QuickReplyItem>
  <QuickReplyItem>Return policy</QuickReplyItem>
  <QuickReplyItem>Contact us</QuickReplyItem>
  <QuickReplyItem>Track order</QuickReplyItem>
</QuickReply>

Variants

Outline
보더가 있는 기본 스타일로 대부분의 UI에 자연스럽게 어울립니다
Default
Filled
배경색이 채워진 스타일로 강조가 필요한 선택지에 적합합니다
Emphasis
Ghost
보더와 배경이 없는 최소한의 스타일로 컴팩트한 레이아웃에 최적입니다
Minimal

Sizes

sm
Height28px
Font12px
Padding10px
Gap6px
default
Height32px
Font13px
Padding12px
Gap6px
lg
Height36px
Font14px
Padding14px
Gap6px

Features

Layout

scroll(가로 스크롤)과 wrap(줄 바꿈) 두 가지 레이아웃을 제공합니다. 채팅 화면에는 scroll, FAQ 목록에는 wrap이 적합합니다.

scroll

wrap

{/* scroll */}
<QuickReply layout="scroll" aria-label="Quick replies">
  <QuickReplyItem>About payment</QuickReplyItem>
  <QuickReplyItem>Shipping info</QuickReplyItem>
  <QuickReplyItem>Return policy</QuickReplyItem>
  <QuickReplyItem>Contact us</QuickReplyItem>
  <QuickReplyItem>Track order</QuickReplyItem>
</QuickReply>

{/* wrap */}
<QuickReply layout="wrap" aria-label="Quick replies">
  <QuickReplyItem>About payment</QuickReplyItem>
  <QuickReplyItem>Shipping info</QuickReplyItem>
  <QuickReplyItem>Return policy</QuickReplyItem>
  <QuickReplyItem>Contact us</QuickReplyItem>
  <QuickReplyItem>Track order</QuickReplyItem>
</QuickReply>

Color

default와 primary 두 가지 컬러를 제공합니다. primary는 브랜드 컬러로 중요한 액션을 강조합니다.

<QuickReply color="default" aria-label="Quick replies">
  <QuickReplyItem>Payment</QuickReplyItem>
</QuickReply>

<QuickReply color="primary" aria-label="Quick replies">
  <QuickReplyItem>Payment</QuickReplyItem>
</QuickReply>

Icon

icon prop으로 칩 앞에 아이콘을 추가할 수 있습니다. lucide-react 등 임의의 ReactNode를 사용할 수 있습니다.

import { QuickReply, QuickReplyItem } from '@7onic-ui/react'
import { CreditCard, Truck, RotateCcw } from 'lucide-react'

<QuickReply aria-label="Quick replies">
  <QuickReplyItem
    icon={<CreditCard />}
  >
    About payment
  </QuickReplyItem>
  <QuickReplyItem
    icon={<Truck />}
  >
    Shipping info
  </QuickReplyItem>
  <QuickReplyItem
    icon={<RotateCcw />}
  >
    Return policy
  </QuickReplyItem>
</QuickReply>

Disabled

disabled prop으로 개별 칩을 비활성화하여 선택 불가 상태를 시각적으로 표시합니다.

<QuickReply aria-label="Quick replies">
  <QuickReplyItem>Payment</QuickReplyItem>
  <QuickReplyItem disabled>Shipping</QuickReplyItem>
  <QuickReplyItem>Returns</QuickReplyItem>
</QuickReply>

API

Component Structure

QuickReply— Compound · Pure React
QuickReply그룹 컨테이너, Context를 통해 레이아웃과 스타일을 자식 요소에 전파
QuickReplyItem개별 칩 버튼, 클릭 가능

서브컴포넌트 구성으로, QuickReply(루트)와 QuickReplyItem(개별 칩)으로 구성됩니다.

Props

QuickReply

layout"scroll"
"scroll" | "wrap"

칩 배치 방식(scroll: 가로 스크롤, wrap: 줄 바꿈)

variant"outline"
"outline" | "filled" | "ghost"

시각 스타일(outline: 보더 있음, filled: 배경색, ghost: 최소)

color"default"
"default" | "primary"

컬러 테마(default: 기본, primary: 브랜드 컬러)

size"default"
"sm" | "default" | "lg"

칩 사이즈

radius"full"
"md" | "lg" | "full"

모서리 둥글기(md: 6px, lg: 8px, full: 완전 원형)

gap"default"
"sm" | "default" | "lg"

칩 사이의 간격

aria-labelundefined
string

그룹의 접근성 라벨

classNameundefined
string

추가 CSS 클래스

QuickReplyItem

iconundefined
ReactNode

칩 앞에 표시할 아이콘(임의의 ReactNode)

asChildfalse
boolean

커스텀 요소와 합성(Radix Slot)

disabledfalse
boolean

칩을 비활성화합니다

onClickundefined
() => void

클릭 시 콜백

classNameundefined
string

추가 CSS 클래스

Anatomy

1
2
3
4Contact
Shipping
Returns
1
QuickReply
플렉스 컨테이너, role=group으로 그룹화
2
QuickReplyItem
칩 버튼(button 요소)
3
Icon (optional)
선택적 리딩 아이콘
4
Label
칩의 라벨 텍스트

Best Practices

✓

권장

  • ✓채팅 UI에서 답변 후보를 제공하여 입력 부담을 줄입니다
  • ✓aria-label로 그룹의 목적을 명시합니다
  • ✓선택지를 3~7개로 제한합니다
✕

지양

  • ✗칩을 10개 이상 나열하지 않습니다
  • ✗"예"/"아니오"만 사용하지 않습니다
  • ✗내비게이션 메뉴 대신 사용하지 않습니다

Accessibility

키보드 조작

Tab각 칩으로 포커스 이동
Enter / Space포커스된 칩 클릭

ARIA / WCAG

  • role="group" + aria-label로 그룹의 목적을 명시합니다
  • 각 아이템은 button 요소로 스크린 리더가 역할을 정확히 읽어줍니다
  • disabled 상태는 시각적으로도 의미적으로도 구별됩니다(pointer-events-none + opacity-50)