Chip

A tappable shortcut in our secondary button's look — white glass, a hairline edge, a squircle — that turns a question into one touch. The hero's quick slots and the agent's quick replies are both Chips.

Playground

import { Chip } from "@/components/shared/chip";

<Chip onClick={() => send("Friday 14:00")}>
  Friday 14:00
</Chip>

Chip

Label

State

Selected

Disabled

Quick replies

The everyday Chip is an action: tapping it sends its own label, as if the client had typed it. It is a md button, 36px tall, and on a touch screen it grows with the buttons to the 40px touch floor.

import { Chip } from "@/components/shared/chip";

<Chip onClick={() => send("Haircut")}>Haircut</Chip>
<Chip onClick={() => send("Friday 14:00")}>Friday 14:00</Chip>
<Chip onClick={() => send("Yes, book it")}>Yes, book it</Chip>

Selected

In a group of choices, pass selected to every chip — true for the chosen one, false for the rest — so each announces itself as a toggle. The chosen one wears the soft ink wash, its edge gone. Pick a slot.

import { Chip } from "@/components/shared/chip";

<div role="group" aria-label="Free today">
  {slots.map((time) => (
    <Chip
      key={time}
      selected={time === slot}
      onClick={() => setSlot(time)}
    >
      {time}
    </Chip>
  ))}
</div>

Disabled

A disabled chip keeps its look, faded, and ignores presses. The hero's quick slots switch off together while the agent is replying.

import { Chip } from "@/components/shared/chip";

{todaySlots.map((time) => (
  <Chip key={time} disabled={pending} onClick={() => book(time)}>
    {time}
  </Chip>
))}

API reference

Prop	Type	Default	Description
children	ReactNode	—	The label — word for word the message or value the chip sends.
selected	boolean	—	Chosen in a group of choices: sets aria-pressed and a soft ink wash. Leave it out for a plain action.
disabled	boolean	false	Fades and ignores presses.
className	string	—	Layout only — margins, flex. Never restyle it here.

Everything else passes through to the <button> (onClick, aria-*, …). It defaults to type="button", so it never submits a form by accident.

Guidelines

A Chip's label must work verbatim as the message or value it sends — tapping it should never surprise.
Chips are shortcuts, never walls: whenever chips are shown, free input stays open.
Two to six per row-group; more than six means the question is too open for chips.
A chip either acts or chooses. Actions leave selected out; in a group of choices every chip gets it, and the group gets a label (role="group" + aria-label).