StatusCard

Safeguards · src/components/StatusCard/StatusCard.tsx

The state of one safeguard, in a sentence somebody can act on.

The title says what IS, not what the feature is called: "Privacy protection is on: High" rather than "Privacy". A person checking whether they are protected should not have to interpret a label.

live pairs a dot with text. The dot alone would be decoration, and a safeguard that signals only in colour is a safeguard some readers cannot verify.

Import

import { StatusCard } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
tone	'safe' | 'warn' | 'brand' | 'plain'	safe on, warn off or degraded, brand a feature in force, plain neutral.
icon	React.ReactNode
title	React.ReactNode
as	keyof React.JSX.IntrinsicElements	Element for the title, when the card opens a section.
size	'md' | 'lg'
live	string	Text beside a live dot: what is running right now.
className	string
children	React.ReactNode