Status Indicators
The Status Indicators preset provides lightweight visual signals to communicate state, availability, or progress. Commonly used in dashboards, chat presence, or device monitors.
Quick Links
Installation
Install the presets individually or as part of the complete @aristobyte-ui library.
Installation of Status Indicators
Install the Status Indicators preset individually if needed. Otherwise, use the globally available version from @aristobyte-ui.
Package Manager
Individual Package
Install only the presets if you need specific functionality.
Full Library
Skip this if you have the complete @aristobyte-ui already installed.
Import
Choose between individual package imports or global library imports based on your project's needs and bundle size requirements.
Import Status Indicators
Import Status Indicators to enrich your UI with semantic feedback. Supports color variants and size scaling for adaptive integration.
Import Method
Individual Package
Import directly from the presets package for optimal tree-shaking and smaller bundle sizes.
Recommended for component-specific usage
Global Library
Import from the main library package when using multiple components from AristoByte UI.
Recommended for component-specific usage
Basic Usage Example
Basic implementation of the component using default properties. Suitable for general-purpose interactions.
Disabled
Depicts Status Indicators in a disabled or neutralized state when telemetry is absent, stale, or when the monitored resource is offline.
Preview
Guidelines
Render disabled indicator when device/resource reports no telemetry or returns 404/timeout.
Use disabled state for indicators when user has no permission to view live status.
Neutralize indicators during maintenance windows to avoid alert fatigue.
Avoid showing critical color states when signal is unverified; prefer a disabled/unknown state.
Telemetry & Signal Validity
Keep the visual meaning explicit (e.g., an 'unknown' label) rather than silently dimming the indicator.
Expose hooks for consumers to supply alternative data or refresh triggers when indicators are disabled.
Ensure screen readers announce status as 'unavailable' or 'offline' to aid monitoring workflows.
Aggregate disabled-state metrics centrally so SRE/UX teams can identify systemic observability gaps.
Implementation Notes
Props Reference
Complete reference for all props available on StatusIndicators component(s), including type definitions, default values, and usage examples.
StatusIndicators
Core Props
children
React.ReactNode | stringdefault: ''