Spinner
- Stable
- WCAG 2.2 evidence
- RTL
A spinner with a status message. The whole block is a polite status region (WCAG 4.1.3);
the spinner itself is decorative. Presentational: renders in React Server Components.
import { SpinnerLabel } from "@nexera-ui/react";- 3
- examples
- 3
- props
- 3
- live controls
- 1
- platform
- 3
- 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.
import { SpinnerLabel } from "@nexera-ui/react";
<SpinnerLabel />Examples 2
The same examples as Storybook, rendered live. Open Code to copy one.
Inline
import { SpinnerLabel } from "@nexera-ui/react";
<SpinnerLabel>Loading payroll</SpinnerLabel>;
Stacked
Layout=Stacked with a description.
import { SpinnerLabel } from "@nexera-ui/react";
<SpinnerLabel layout="stacked" description="This usually takes a few seconds.">
Loading payroll
</SpinnerLabel>;
Props 3
Press "Try it" on a card to load that prop into the playground.
3 props shown
children*NexeraReactNodeText next to the spinner, for example "Loading payroll". It is announced as a polite status message.
layoutNexera"inline" | "stacked"Row (small spinner, quiet text) or centred column (large spinner, heading).
descriptionNexeraReactNodeSecondary line under the label. Shown in the stacked layout only, as in Figma.
* 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
3 direct · 0 supporting- 1.3.1Info and RelationshipsLevel A · tested directly
- 4.1.2Name, Role, ValueLevel A · tested directly
- 4.1.3Status MessagesLevel AA · 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:.
<SpinnerLabel className="shadow-sm" />Used in blocks
Related components
- AlertAn inline status message about a section or a task: tone icon, title, optional description, actions and close button.
- BannerA page-wide notice across the top of a page or app shell: tone icon, message, optional link and close button on a solid fill.
- CircularProgressShows progress as a ring with the value in the centre.
- EmptyStateExplains why a list, table or page has no content and what to do next.
- ProgressBarShows how far a task has progressed.
- ProgressStepsA segmented progress indicator for a flow with a known number of steps, such as onboarding or a form wizard: a header with "Step 2 of 5" and the step title above one segment per step.
- SpinnerSmall loading indicator.
- ToastGives the components below it a toast queue through `useToast()` and renders its `ToastRegion`.