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
ボーダーなし・背景なしの最小限スタイル。コンパクトなUIに最適。
Minimal

Sizes

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

Features

Layout

scroll（横スクロール）とwrap（折り返し）の2種類のレイアウトを提供します。チャット画面では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の2色を提供。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（Root）と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個以上並べない
  • ✗「はい」「いいえ」だけにしない — 具体的な内容を含める
  • ✗ナビゲーション代わりに使わない — 会話UI専用

Accessibility

キーボード操作

Tab各チップにフォーカス移動
Enter / Spaceフォーカス中のチップをクリック

ARIA / WCAG

  • role="group" + aria-labelでグループの目的を明示
  • 各アイテムはbutton要素 — スクリーンリーダーが役割を正確に読み上げる
  • disabled状態は視覚的 + aria的に区別（pointer-events-none + opacity-50）