7onicDESIGN SYSTEM

QuickReply

QuickReply displays suggested reply chips in chat UIs and AI assistants — users tap once to send a response, keeping conversations flowing.

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
Bordered chips — versatile default style that works across most backgrounds
Default
Filled
Filled background — higher visual weight for emphasis
Emphasis
Ghost
No border, no background — minimal presence for compact layouts
Minimal

Sizes

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

Features

Layout

Two layout modes: scroll (horizontal overflow) for chat UIs, and wrap (multi-row) for FAQ lists and topic chips.

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

Two color themes — default for neutral contexts, primary to highlight brand-colored actions.

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

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

Icon

Add a leading icon to any item via the icon prop. Accepts any ReactNode, including lucide-react icons.

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

Disable individual chips with the disabled prop to visually indicate unavailable options.

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

API

Component Structure

QuickReply— Compound · Pure React
QuickReplyGroup container — propagates layout and style to children via Context
QuickReplyItemIndividual chip button — clickable

Multi-part component. Composed of QuickReply (Root) and QuickReplyItem (individual chips).

Props

QuickReply

layout"scroll"
"scroll" | "wrap"

Chip layout — scroll: horizontal overflow, wrap: multi-row

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

Visual style — outline: bordered, filled: background, ghost: minimal

color"default"
"default" | "primary"

Color theme — default: neutral, primary: brand color

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

Chip size

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

Border radius — md: 6px, lg: 8px, full: pill

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

Spacing between chips

aria-labelundefined
string

Accessible label for the group

classNameundefined
string

Additional CSS classes

QuickReplyItem

iconundefined
ReactNode

Leading icon for the chip (any ReactNode)

asChildfalse
boolean

Compose with a custom element (Radix Slot)

disabledfalse
boolean

Disable the chip

onClickundefined
() => void

Click callback

classNameundefined
string

Additional CSS classes

Anatomy

1
2
3
4Contact
Shipping
Returns
1
QuickReply
Flex container — role=group for grouping
2
QuickReplyItem
Chip button (button element)
3
Icon (optional)
Optional leading icon
4
Label
Chip label text

Best Practices

✓

Recommended

  • ✓Offer reply shortcuts in chat UIs to reduce typing
  • ✓Set aria-label to identify the group's purpose
  • ✓Limit to 3–7 chips for scannable choices
✕

Don't

  • ✗Don't show more than 10 chips
  • ✗Don't use only generic labels like "Yes" / "No"
  • ✗Don't use as a navigation menu — conversational UI only

Accessibility

Keyboard

TabMove focus between chips
Enter / SpaceActivate the focused chip

ARIA / WCAG

  • role="group" + aria-label communicates the group's purpose
  • Each item is a button element — screen readers announce role correctly
  • Disabled state is both visual and semantic (pointer-events-none + opacity-50)