FORMA Docs

Reactions

Acknowledge a post in one tap, with counts that roll.

import { Reactions } from "@/forma/arc/reactions/reactions";
Base

In FORMA

  • Liegt in kit/arc/reactions und ist über @/forma/arc/reactions/reactions erreichbar.
  • Farbe, Ecken, Höhen, Abstände, Tiefe, Schrift und Tempo kommen aus der Richtung (core/arc-bridge.ts); Arc behält Verhalten, Tastatur und Federn.

When to use

  • Lightweight acknowledgement on comments, posts, or release notes.
  • Slack-style reaction pills with counts and a picker for new reactions.

When not to use

  • Use a reply field such as ai-composer when people need to say something specific.
  • Use action-swap for a single like or follow toggle without counts.
  • Use badge for static counts that people cannot change.

Usage

import { Reactions } from "@/forma/arc/reactions/reactions";
import { Heart, PartyPopper, ThumbsUp } from "@/forma/icons";

const options = [
  { id: "like", label: "Like", icon: ThumbsUp },
  { id: "love", label: "Love", icon: Heart },
  { id: "party", label: "Celebrate", icon: PartyPopper },
];

export function CommentReactions() {
  return <Reactions options={options} defaultValue={[{ id: "like", count: 3, reacted: false }]} onValueChange={(_, change) => save(change)} />;
}

API reference

Reactions

A bar of reaction pills with counts and an add button that opens a picker tray.

PropTypeDefaultDescription
options (required)ReactionOption[]–Every reaction the picker offers: { id, label, icon: LucideIcon }.
valueReaction[]–Controlled reactions: { id, count, reacted }. Pills keep this order; a count of zero leaves the bar.
defaultValueReaction[][]Initial reactions when uncontrolled.
onValueChange(next: Reaction[], change: { id: string; reacted: boolean }) => void–Called with the next list and the change that produced it.
labelstring"Reactions"Accessible name for the bar.
classNamestring–Extra class on the root.

Keyboard interactions

KeysAction
Enter / SpaceToggles your reaction on a pill, or opens the picker from the add button.
ArrowLeft / ArrowRight / ArrowUp / ArrowDownMoves between options in the picker, wrapping at the ends.
Home / EndJumps to the first or last option.
EscapeCloses the picker and returns focus to the add button.

Accessibility

  • The bar is role="group"; each pill is a button with aria-pressed and a label like "Love, 4 reactions, including yours".
  • The picker is a role="toolbar" with roving tabindex and labelled options; the add button is labelled "Add reaction".
  • A role="status" region announces each change; a pill that leaves while focused hands focus to its neighbour or the add button.

Motion

  • Pills scale in from a blur and reflow on a morph spring; the icon gets a velocity kick that stacks on quick taps, and digits roll in the direction of the count.
  • The picker grows out of the add button while a shared highlight glides between options.
  • Reduced motion, read only after hydration, swaps everything with short fades and no layout springs.

Responsive behavior

  • The bar wraps onto new lines as pills are added, and its height springs to fit.
  • The picker opens in a Radix popover, so it repositions near viewport edges.
  • Hover highlights in the picker follow the mouse only; touch taps select directly.

Performance

  • Pills use layout position animation and count digits roll individually; fine for a handful of reactions per item.
  • In long comment threads each bar runs its own ResizeObserver, so avoid rendering hundreds at once.

Notes for AI

  • Use for lightweight acknowledgement on comments, posts, or release notes. When people need to say something specific, add a reply field instead.
  • Icons must be Lucide component types, not elements. Persist the change from onValueChange and control value when counts come from the server.

Also in gestures

  • Hold to confirm: Confirm a destructive action by holding, not tapping.
  • Swipe actions: Reveal row actions with a swipe, or from the same actions in a menu.

Guidance for AI tools

Reactions: Acknowledge a post in one tap, with counts that roll. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://uiarc.dev/llms.txt

ZurückSwipe actionsWeiterSlider

Komponente und Text: Arc UI (MIT, uiarc.dev), angepasst für FORMA.