data-display / stable
InlineStatus
Small tone-and-icon text inside captions, with optional source detail on focus or hover.
LIVE PREVIEW
Loading preview…
When to use
- Measurement coverage and quiet status inside a Meter caption.
Consider an alternative
- Standalone categories — use Badge.
- Problems requiring attention — use Notice.
Import
import { InlineStatus } from '@revido-llc/kit';Props
Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.
Examples
Tones
<InlineStatus tone="success">Measurements complete</InlineStatus>Meter caption
<Meter label="Planned progress" value={11} size="sm" showHeader={false} details="11% of items complete" trailing={<InlineStatus tone="warning" tooltip="Eight items are missing measurements.">Partial · 8 missing</InlineStatus>} />