Spinner

A busy indicator rendered as a rotating icon inside a role="progressbar" host, colored by a semantic color role and sized by a size variant.

Checking DNS for sergiodxa.com…

Loading this month’s usage

View code

<Button isPending parts={{ spinner: [spin()] }}>
	Publishing
</Button>

<div mix={[hstack({ gap: 2, align: "center" })]}>
	<Spinner size="sm" mix={[spin()]} aria-label="Checking the domain" />
	<Text>Checking DNS for sergiodxa.com…</Text>
</div>

<Card>
	<Card.Content>
		<Spinner color="brand" size="lg" mix={[spin({ duration: "900ms" })]} aria-label="Loading usage" />
		<Text>Loading this month's usage</Text>
	</Card.Content>
</Card>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

npm add @sdxc/ui

import "@sdxc/ui/theme.css";

Usage

import { Spinner } from "@sdxc/ui";

Renders a busy indicator: a role="progressbar" host with no aria-valuenow, so assistive technology reads it as indeterminate. Pair it with the spin() mixin from the animation layer for the rotating loop.

Examples

<Spinner color="danger" size="lg" aria-label={t("status.retrying")} />

<Spinner mix={[spin()]} aria-label={t("status.loading")} />

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Description
`color?`	`"brand" \| "neutral" \| "success" \| "warning" \| "danger"`	Semantic color role. Defaults to DEFAULT_COLOR.
`size?`	`"sm" \| "md" \| "lg"`	Size variant. Defaults to DEFAULT_SIZE.
`"aria-label"`	`string`	Accessible label announced by assistive technology for as long as the spinner is on screen. Required — the component ships no built-in copy, so a consumer's own localized string drives it.

Also accepts everything in Omit<TagProps<"div">, "aria-label">.

Types

Name	Values	What it decides
`Color`	`"brand" \| "neutral" \| "success" \| "warning" \| "danger"`	Semantic color role, each mapped to its matching `--ui-*-fg` variable.
`Size`	`"sm" \| "md" \| "lg"`	Size variant controlling the rotating icon's rendered dimensions.