A small status indicator whose outline morphs between a circle, a triangle and a rounded square as it changes between idle, loading, success, warning and error.
Deploy #482
main
npx shadcn@latest add https://hyperblur.dev/r/micro-status-mark.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/micro-status-mark.tsx.
import { MicroStatusMark } from "@/components/hyperblur/micro-status-mark"
<MicroStatusMark status="loading" showLabel />| Prop | Type | Default | Description |
|---|---|---|---|
| status | "idle" | "loading" | "success" | "warning" | "error" | "idle" | Current status. Changing it plays the morph. |
| size | number | 28 | Width and height in pixels. |
| label | string | Accessible name for the current status. Overrides labels. | |
| labels | Partial<Record<MicroStatus, string>> | Accessible names per status. Defaults to Idle, Loading, Success, Warning and Error. | |
| showLabel | boolean | false | Show the label as visible text next to the mark. |
| colors | Partial<Record<MicroStatus, string>> | Colors per status. Defaults to gray, blue, green, amber and red. | |
| duration | number | 480 | Morph duration in milliseconds. 0 switches shapes instantly. |