All components
Status
A palette-driven presence dot with a label, for system and user state.
Operational
Sizes
Operationalsm
Operationalmd
Operationallg
Install
zsh — status
1bunx stylexblocks add statusUsage — Base UI
status.tsx
12345678910111213import { Status } from "#components/ui/base-ui/status.tsx";import { greenPalette } from "@stylexblocks/ui/themes/palettes.ts";
export function Example() { return ( // size resolves once on Root (exposed as data-size); the dot takes the // active palette's solid color <Status.Root size="md" palette={greenPalette}> <Status.Indicator /> Operational </Status.Root> );}