Spinner

계약

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

토큰

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

설치

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

사용법

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

<Spinner size="md" />

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

API 레퍼런스

Prop	Default	Type	Description
size	—	"xs" | "sm" | "md" | "lg" | "xl" | "xxl"	스피너 크기 티어.
label	—	ReactNode	선택적 레이블 텍스트 또는 요소.
labelPosition	—	"left" | "right" | "top" | "bottom"	스피너 기준 레이블 위치.