import { AssistChip, FilterChip, InputChip, SuggestionChip } from "@brijbyte/md3-react/chip";@import "@brijbyte/md3-react/button.css"; /* chips build on Button's chrome */
@import "@brijbyte/md3-react/chip.css";One component family covers entry, selection, filtering, and actions, so you don't
reach for four different patterns to build a tag list, a filter bar, and a quick-action
row. All four MD3 chip types share the same 32px container and are outlined by default;
assist, filter, and suggestion chips also take an elevated container.
Surface a shortcut to a smart or automated action right where it's relevant, instead of
sending people hunting for it in a menu. Plain button semantics, usually with an 18dp
leading icon.
Build a filter bar without wiring up your own pressed state or ARIA attributes. Each
chip renders a toggle button (aria-pressed) built on
Base UI Toggle — control it with
pressed / defaultPressed / onPressedChange. While selected, the container fills
with secondary-container and a checkmark replaces any leading icon, so the active
state is obvious at a glance.
Show people exactly what they entered — a contact, a tag, a filter value — and let
them remove it with one click, without you building a second focusable element by hand.
Passing onRemove adds a trailing remove button (its accessible name comes from
removeLabel); the chip root is a plain container, so the primary action and the
remove button are separate tab stops.
Swap in a photo instead of a generic icon: a round 24dp avatar replaces the leading
icon and makes the container fully rounded.
Input chips also take an 18dp leading icon and a selected state, for cases like a
selected tag that still needs its own icon:
Offer a one-tap prediction — a smart reply, a likely next input — without asking
someone to type it themselves. Plain button semantics, styled like assist chips but
with an on-surface-variant label.