Spinner

Contract

Overview

Machine-readable contract from Component Spec.

component: spinnerexport: Spinnerversion: 1tokens.visual: spinnerattributes: data-refineui=spinner

Anatomy

Part	data-refineui
root	spinner

Variants

Axis	Values
size	xs, sm, md, lg, xl, xxl

Accessibility

Slot	Element	Role
spinner	div	status

Layout

Property	Value
direction	logical
rtl	true

Tokens

Variant

Select a recipe variant — preview and Recipe → Tokens update together.

Recipe → Tokens

Slot bindings for variant="default" — declared in Spinner/style → tokens.

Slot	Variant	Property	Trace	Semantic	Light → foundation	Dark → foundation	Recipe class
ring	—	track	spinner.track	backgroundBrandSubtle	primaryLightGray	neutral800	border-refineui-alias-background-brand-subtle
ring	—	indicator	spinner.indicator	backgroundBrand	primaryBlack	primaryGray	border-t-refineui-alias-background-brand
label	—	foreground	spinner.label	foregroundPrimary	primaryBlack	neutralWhite	text-refineui-alias-foreground-primary

Component token trace

All paths in token-trace-v2.json prefixed with spinner.

Trace	Semantic	Light foundation	Dark foundation	Light	Dark
spinner.indicator	backgroundBrand	primaryBlack	primaryGray	#212121	#D4D4D4
spinner.label	foregroundPrimary	primaryBlack	neutralWhite	#212121	#FFFFFF
spinner.track	backgroundBrandSubtle	primaryLightGray	neutral800	#E6E6E6	#2A2A2A

Installation

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

Usage

import { Spinner } from "@refineui/react";

<Spinner size="md" />

<Spinner size="lg" label="Loading..." labelPosition="right" />

API Reference

Prop	Default	Type	Description
size	—	"xs" | "sm" | "md" | "lg" | "xl" | "xxl"	Spinner size tier.
label	—	ReactNode	Optional label text or element.
labelPosition	—	"left" | "right" | "top" | "bottom"	Position of the label relative to spinner.