Spinner — Frontfriend

Interactive preview

Rendered from the shared Frontfriend stories with React Base, the same preview Studio shows. Styling comes from your Design System; the code below is native to Radix UI.

Installation

Complete project setup first. Your configuration must select react/radix and include your Design System ID.

pnpm exec frontfriend download spinner -f react --primitive radix

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

<Spinner size="4" />

Examples

Default

<Spinner size="4" />

Sizes

import { Spinner } from "@/components/ui/spinner";
<div className="flex items-center gap-6">
  <Spinner size="4" />
  <Spinner size="6" />
  <Spinner size="10" />
</div>;

With Label

import { Spinner } from "@/components/ui/spinner";
<div className="flex items-center gap-2 text-sm text-neutral-mid">
  <Spinner size="4" />
  Loading...
</div>;

In Button

import { Button } from "@/components/ui/button";
import { Spinner } from "@/components/ui/spinner";
<Button variant="tertiary" disabled>
  <Spinner size="4" />
  Please wait
</Button>;

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Radix UI.

Prop	Type	Default	Description
`size`	`string`	`"4"`

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.