Thumbs
- Stable
- WCAG 2.2 evidence
- RTL
Thumbs up / thumbs down feedback: a question and two icon buttons; the answer can be cleared. Built on React Aria ToggleButtonGroup with single selection: a radiogroup named by the question, two radios named
"Helpful" and "Not helpful" (upLabel, downLabel), arrow keys move between them (mirrored in right-to-left
locales), Enter or Space chooses, pressing the chosen thumb again clears it (WCAG 2.1.1, 4.1.2). Buttons are 36 px
targets (2.5.8). The chosen thumb is tinted, outlined in brand colour and drawn filled, so the state is not colour-only
(1.4.1). Icons are decorative (1.1.1). Consumer duties: question wording, translated labels, a follow-up (for example a Textarea) for nuanced feedback.
import { Thumbs } from "@nexera-ui/react";- 3
- examples
- 13
- props
- 2
- live controls
- 1
- platform
- 8
- WCAG criteria
- 1
- block uses it
Try every prop. Copy the code.
Change the props and the code updates. Check light and dark, LTR and RTL, and phone width.
import { Thumbs } from "@nexera-ui/react";
<Thumbs />Examples 2
The same examples as Storybook, rendered live. Open Code to copy one.
Long question
A long question wraps; the thumbs move to the next line in a narrow container.
import { Thumbs } from "@nexera-ui/react";
<div className="max-w-[16rem]">
<Thumbs label="Was this article about parental leave and part-time return to work helpful?" />
</div>;
Right to left
Right-to-left: the question is on the right and arrow keys follow the reading direction. Translate the names.
import { Thumbs } from "@nexera-ui/react";
<Thumbs label="هل كان هذا مفيدا؟" upLabel="مفيد" downLabel="غير مفيد" defaultValue="up" />;
Props 13
Press "Try it" on a card to load that prop into the playground.
13 props shown
valueNexeraThumbsValue | nullThe answer, or null for none. Controlled; pair it with onChange.
defaultValueNexeraThumbsValue | nullThe initial answer when uncontrolled.
onChangeNexera(value: ThumbsValue | null) => voidCalled with the new answer; null when the chosen thumb is pressed again to clear it.
upLabelNexerastringAccessible name of the thumb-up button. Translate it.
downLabelNexerastringAccessible name of the thumb-down button. Translate it.
nameNexerastringName of a hidden form field that submits up, down or an empty string.
classNameNexerastringExtra classes for the root, merged last so they win over the defaults.
styleNexeraCSSPropertiesInline style for the root.
labelNexeraReactNodeThe question before the thumbs, for example "Was this helpful?". Wraps; names the group.
aria-labelNexerastringAccessible name when the question is shown elsewhere. Translate it.
aria-labelledbyNexerastringId(s) of the visible element(s) that hold the question.
isDisabledReact AriabooleanWhether all items are disabled.
aria-describedbyReact AriastringIdentifies the element (or elements) that describes the object.
* 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
5 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 · tested directly
- 1.4.12Text SpacingLevel AA · supporting test
- 2.1.1KeyboardLevel A · tested directly
- 2.4.7Focus VisibleLevel AA · supporting test
- 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.
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-disableddata-hovereddata-presseddata-selected
<Thumbs className="data-disabled:opacity-90 shadow-sm" />Used in blocks
Related components
- CalendarDayOne day of a {@link CalendarMonth } grid, built on React Aria `CalendarCell`: a `gridcell` whose button is named by the full, localised date ("Wednesday, October 14, 2026"), with `aria-selected`, `aria-disabled` and the "today" and range descriptions read by screen readers (WCAG 1.3.1, 4.1.2).
- CalendarMonthA month calendar for picking a date or a date range: header with previous / next buttons and the localised month name, weekday row, and six weeks of `CalendarDay`s.
- CheckboxThe bare 18 px checkbox: one independent yes/no choice applied on submit, or a row selector in a table, list or tree.
- CheckboxCardA large checkbox option with an icon, a title and a description, for a few options that need explanation (notification channels, benefits).
- CheckboxFieldA checkbox with a label and optional helper text: the box (the same element as `Checkbox`) followed by the label and description, applied on submit.
- ColorInputA hex colour field with a swatch and a picker popover.
- ColorPickerPicks a colour.
- ColorTokenCardDocumentation card for one colour token: a 96 px colour sample with an "Aa" text sample, then the name, token path, hex value and contrast note as text.