ExampleReactregistry:exampleSelf-contained
Status indicator demo
status-indicator-demo
A status indicator demo component
A demo of status-indicator
registry/8starlabs-ui/examples/status-indicator-demo.tsx→ components/8starlabs-ui/examples/status-indicator-demo.tsx
15 lines
import StatusIndicator from "@/registry/8starlabs-ui/blocks/status-indicator";
export default function StatusIndicatorDemo() {
return (
<div className="flex flex-col gap-4">
<StatusIndicator state="active" label="All systems operational" />
<StatusIndicator state="down" label="Systems down" />
<StatusIndicator state="idle" label="Systems idle" />
<StatusIndicator state="fixing" label="Diagnosing issue, fixing" />
<StatusIndicator state="active" label="Small size" size="sm" />
<StatusIndicator state="fixing" label="Large size" size="lg" />
</div>
);
}
@8starlabs-ui
More from @8starlabs-ui
A Stripe-style perspective error shake for form fields, with a declarative wrapper and an imperative hook
A compact status history bar for showing service uptime across days or hours.