Reaction

Stable
WCAG 2.2 evidence
RTL

A reaction under a message, such as a thumbs up, that the user can add or remove. Built on React Aria ToggleButton: a native button with aria-pressed (the user's own reaction), toggled with a click, Enter or Space, with a visible focus ring for keyboard focus (WCAG 2.1.1, 2.4.7, 4.1.2). Its accessible name says what the reaction is and how many people chose it, for example "Thumbs up, 3 reactions"; the visible count is part of it (2.5.3). The pill is 24 px tall, the minimum target size (2.5.8). Selected changes fill and stroke; the brand stroke differs from the default stroke by more than 3:1, and aria-pressed carries the state for assistive technology (1.4.1, 1.4.11). Controlled (isSelected + onChange) or uncontrolled (defaultSelected). Consumer duties: translated label and countLabel; updating count; grouping several reactions in a role="group" with a label such as "Reactions".

import { Reaction } from "@nexera-ui/react";

Loading example…

3
examples: 18
props: 3
live controls: 1
platform: 9
WCAG criteria: 2
blocks use it

Try every prop. Copy the code.

Change the props and the code updates. Check light and dark, LTR and RTL, and phone width.

Loading…

label

isSelectedfalse

isDisabledfalse

Generated code

import { Reaction } from "@nexera-ui/react";

<Reaction />

Examples 2

The same examples as Storybook, rendered live. Open Code to copy one.

Under a message

Several reactions under a message, in a labelled group; the count follows your own reaction.

Loading example…

app.tsx

import { useState } from "react";
import { Reaction } from "@nexera-ui/react";
import { LuSmile, LuThumbsUp } from "react-icons/lu";

export function UnderAMessage() {
  const [up, setUp] = useState(true);
  const [smile, setSmile] = useState(false);
  return (
    <div role="group" aria-label="Reactions" className="flex flex-wrap gap-1">
      <Reaction
        icon={<LuThumbsUp />}
        label="Thumbs up"
        count={up ? 4 : 3}
        isSelected={up}
        onChange={setUp}
      />
      <Reaction
        icon={<LuSmile />}
        label="Smile"
        count={smile ? 2 : 1}
        isSelected={smile}
        onChange={setSmile}
      />
      <Reaction icon="🎉" label="Party" count={12} />
    </div>
  );
}

Right to left

Right-to-left: the icon moves to the right and the count uses the locale's digits.

Loading example…

app.tsx

import { Reaction } from "@nexera-ui/react";
import { LuThumbsUp } from "react-icons/lu";

<Reaction
  icon={<LuThumbsUp />}
  label="إعجاب"
  count={3}
  countLabel={(_count, formatted) => `${formatted} تفاعلات`}
/>;

Props 18

Press "Try it" on a card to load that prop into the playground.

icon*Nexera

ReactNode

The reaction's icon or emoji, 14 px. Decorative: the accessible name comes from label.

label*Nexera

string

What the reaction means, in words, for example "Thumbs up". It starts the accessible name ("Thumbs up, 3 reactions"; WCAG 1.1.1, 4.1.2). Translate it.

count*Nexera

number

Number of people who reacted, shown in the locale's digits and included in the accessible name. Update it in onChange when the user's own reaction is added or removed.

countLabelNexera

(count: number, formatted: string) => string

Count part of the accessible name, from the number and its locale-formatted text. Translate it, with your locale's plural rules.

idNexera

string

DOM id of the button.

classNameNexera

string

Extra classes, merged last so they win over the defaults.

styleNexera

CSSProperties

Inline style.

aria-describedbyReact Aria

string

Identifies the element (or elements) that describes the object.

isSelectedReact Aria

boolean

Whether the element should be selected (controlled).

defaultSelectedReact Aria

boolean

Whether the element should be selected (uncontrolled).

onChangeReact Aria

(isSelected: boolean) => void

Handler that is called when the element's selection state changes.

isDisabledReact Aria

boolean

Whether the button is disabled.

onPressReact Aria

(e: PressEvent) => void

Handler that is called when the press is released over the target.

onPressStartReact Aria

(e: PressEvent) => void

Handler that is called when a press interaction starts.

onPressEndReact Aria

(e: PressEvent) => void

Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.

onPressChangeReact Aria

(isPressed: boolean) => void

Handler that is called when the press state changes.

onPressUpReact Aria

(e: PressEvent) => void

Handler that is called when a press is released over the target, regardless of whether it started on the target or not.

autoFocusReact Aria

boolean

Whether the element should receive focus on render.

* Required. React Aria props shown are the ones most apps use; the component accepts the rest of its React Aria props too.

Accessible by default.

Built on React Aria, and covered by the WCAG 2.2 evidence generated on every build.

WCAG 2.2 evidence

6 direct · 3 supporting

1.1.1Non-text ContentLevel A · tested directly
1.3.1Info and RelationshipsLevel A · tested directly
1.4.1Use of ColorLevel A · supporting test
1.4.11Non-text ContrastLevel AA · supporting test
2.1.1KeyboardLevel A · tested directly
2.4.7Focus VisibleLevel AA · tested directly
2.5.3Label in NameLevel A · tested directly
2.5.8Target Size (Minimum)Level AA · supporting test
4.1.2Name, Role, ValueLevel A · tested directly

Fits any width.

Nexera components respond to the space they are given. Drag the corner of the frame, or pick a width.

0 px · drag the corner

Styling hooks

Pass className to add Tailwind classes (merged last). State is exposed as data attributes, so you can style it with variants like data-pressed:.

data-disabled
data-hovered
data-pressed
data-selected

Usage

<Reaction className="data-disabled:opacity-90 shadow-sm" />

Theme studio

Reaction

Try every prop. Copy the code.

Examples 2

Under a message

Right to left

Props 18

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components