Browse components
Status Mark
One status icon that morphs between idle dot, spinning arc, a ring that closes into a popping check, and a shaking cross.
Installation
npx shadcn@latest add @glint-ui/status-markFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/status-mark.json
Usage
import { StatusMark } from "@/components/ui/status-mark";
<StatusMark status={saving ? "loading" : error ? "error" : saved ? "success" : "idle"} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| status | "idle" | "loading" | "success" | "error" | "idle" | Current state. The demo's Deploy button cycles it. |
| size | number | 48 | Diameter in px. |
| successColor | string | "#22c55e" | Success color. |
| errorColor | string | "#ef4444" | Error color. |
| labels | ReactNode | — | Screen-reader text per status, e.g. { success: "Saved" }. |
| className | string | — | Extra classes for the root element. |