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" />;
}

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

Properties

nameIconProps

The Lucide icon to rotate. 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