Loading indicator components

The type prop accepts three values: "line-simple" (a solid arc over a muted track), "line-spinner" (a solid arc with no track), and "dot-circle" (a dotted ring with a gradient fade). It defaults to "line-simple".

Four sizes, set with the size prop: "sm" renders a 32px spinner, "md" 48px, "lg" 56px, and "xl" 64px. The default is "sm". The size also drives the label typography — "sm" and "md" use small text, while "lg" and "xl" step up to large text.

Pass a string to the label prop. It renders directly beneath the spinner in text-secondary, centered, with the spacing and font size taken from the current size. Leave label out entirely and only the spinner is rendered.

There is no color prop — all three types draw with the brand foreground token (stroke-fg-brand-primary or text-fg-brand-primary), and the "line-simple" track uses text-bg-tertiary. To recolor them everywhere, change your --color-brand-* variables in theme.css; for a one-off variant, edit those classes in your copy of loading-indicator.tsx.

No — the component only accepts type, size and label, and its own root is a fixed flex flex-col items-center justify-center wrapper. Wrap it in your own element to handle layout, or add a new key to the local styles object if you need a size beyond "xl".

Not by default. The spinners are plain decorative <svg> elements with no role or live region, and the optional label is rendered as ordinary text. If the loading state needs to be announced, put the indicator inside a container with role="status" and an aria-live region of your own — the component is copy-and-paste, so you can also add those attributes directly to the file.