Components
Spinner
StableAn indicator that can be used to show a loading state.
Default
Sizes
Three sizes: sm (12px), md (16px, default), lg (24px).
sm
md
lg
Colors
Variants
circle uses LoaderCircle (arc ring, default). loader uses Loader2 (8-spoke asterisk).
circle
loader
BrikSpinner
A dedicated loading-button component. Always in the loading state — no toggle needed. Supports primary, secondary, and outline variants.
In Badges
Pass a Spinner to the icon prop for inline loading badges.
SyncingUpdatingProcessing
Loading Empty State
Compose with standard layout utilities to build a full-page loading state.
Processing your request
Please wait while we process your request. Do not refresh the page.
Usage
import { Spinner } from "@mnee-ui/ui"<Spinner /><Spinner size="lg" color="brand" /><Spinner variant="loader" size="sm" color="muted" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "circle" | "loader" | "circle" | LoaderCircle (arc ring) or Loader2 (8-spoke) |
| size | "sm" | "md" | "lg" | "md" | 12px / 16px / 24px |
| color | "default" | "brand" | "muted" | "success" | "error" | "warning" | "info" | "default" | Icon color |
| className | string | — | Additional classes passed to the SVG element |