All components
Status
A palette-driven presence dot with a label, for system and user state.
Operational
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> );}Sizes
Operationalsm
Operationalmd
Operationallg
Install
1npx stylexblocks add statusSource
components/ui/base-ui/status.tsx
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869import * as stylex from "@stylexjs/stylex";import { createSlotRecipeContext } from "#lib/base-ui/create-slot-recipe-context.tsx";import { defineSlotRecipe } from "#lib/recipe-props.ts";import { colorPalette } from '@stylexblocks/ui/color-palette.stylex.ts'import { fontSizes } from '@stylexblocks/ui/tokens/font-sizes.stylex.ts'import { lineHeights } from '@stylexblocks/ui/tokens/line-heights.stylex.ts'import { radii } from '@stylexblocks/ui/tokens/radii.stylex.ts'import { spacing } from '@stylexblocks/ui/tokens/spacing.stylex.ts'
const statusRoot = stylex.create({ base: { display: 'inline-flex', alignItems: 'center', gap: spacing._2, },})
const statusRootSizes = stylex.create({ sm: { fontSize: fontSizes.xs, lineHeight: lineHeights.xs, }, md: { fontSize: fontSizes.sm, lineHeight: lineHeights.sm, }, lg: { fontSize: fontSizes.md, lineHeight: lineHeights.md, },})
const statusIndicator = stylex.create({ base: { width: '0.64em', height: '0.64em', flexShrink: 0, borderRadius: radii.full, forcedColorAdjust: 'none', backgroundColor: colorPalette.solid, },})
export type StatusSize = keyof typeof statusRootSizes
// defineSlotRecipe validates the shape at compile time: default values must// exist in the axis maps, and slot keys must be `styles` or a declared axisconst statusSlotRecipe = defineSlotRecipe({ slots: { root: { styles: statusRoot, sizes: statusRootSizes }, indicator: { styles: statusIndicator }, }, defaultVariants: { size: "md" },});
/** * Status — recipe and component colocated in one file. `<Status.Root size>` * resolves the recipe once and the indicator inherits it through context; * the dot takes its color from the active palette theme. Each part composes * via `render`. */const { withProvider, withContext } = createSlotRecipeContext(statusSlotRecipe);
export const Status = { // slot names resolve mechanically from the recipe maps above Root: withProvider("span", "root", "StatusRoot"), Indicator: withContext("span", "indicator", "StatusIndicator"),};