Spinner

The Spinner component is a rotating loading indicator: a Lucide icon spinning once per second. It is built on the Icon component, so any Lucide glyph can spin, and it accepts Icon's props unchanged - note that, as with Icon, they are not $-prefixed.

import React from "react";
import { Spinner } from "cherry-styled-components";

export default function Loading() {
  return <Spinner aria-label="Loading" />;
}

Any other glyph spins the same way: <Spinner icon={Loader} size={32} /> with Loader imported from lucide-react.

The chat kit's send button swaps its arrow for a Spinner while a reply is streaming.

Properties

iconIconComponent

The Lucide glyph to rotate, imported from lucide-react. Defaults to LoaderCircle.

colorstring

Stroke color. By default the spinner resolves its color from the theme (colors.dark) rather than inheriting, so it stays visible on either mode's surface.

sizenumber

Size in pixels, applied to both width and height. Defaults to Icon's 24px.

aria-labelstring

Accessible label. Without one the icon is decorative (aria-hidden), so add a label when the spinner is the only loading signal.

Under prefers-reduced-motion: reduce the rotation is disabled and the icon renders static.

View Source