Skip to content
Mizen UI
Docs

IntroductionInstallationCLIStylingFoundationsThemingCompositionIntegrationsAccessibilityFor agents

useCopyToClipboard

AccordionAspect RatioCardCollapsibleFrameGridGroupInlineScroll AreaSectionSeparatorSpacerStack

BlockquoteCitationCodeHeadingKbdLabelLinkTextVisually Hidden

ButtonButton GroupToggleToggle groupToolbar

CalendarCheckboxCheckbox groupComboboxDate pickerDate range pickerDate-Time InputFieldFieldsetFile UploadFormInputInput groupNumber fieldOTP FieldRadio groupSelectSliderSwitchTextareaTime Input

BreadcrumbMenubarNavigation MenuPaginationSegmented ControlStepperTabs

Alert dialogCommandContext MenuDialogDrawerMenuPopoverPreview CardSheetTooltip

AlertBadgeEmptyError StateMeterProgressSkeletonSpinnerStatus dotToast

Activity FeedAvatarAvatar GroupData TableListMetricOverflow ListProperty ListTableTokenTree

Area ChartBar ListCalendar HeatmapCategory ComparisonChart FrameChart LegendChart TooltipDistributionFunnelHeatmapMetric TrendPart-to-WholeProgress RingsRadar ChartRadial BarsSankey ChartScatter ChartScore GaugeTime Series

Diagram

AttachmentCarouselCode BlockLightboxMarkdownThumbnailTimestamp

Agent ThinkingApproval CardComposerConversationInline CitationMessageMessage ScrollerQuestion CardSourcesStreaming TextSuggestionTask ListTerminalTool Call

On this page

  • Preview
  • Usage
  • Examples
  • Service states
  • Recommendations
  • Usage boundaries
  • API reference

Feedback

Status dot

Shows a fixed, system-owned status dot with an accessible label.

idle

Usage

import { StatusDot } from "@mizen-labs/ui";

Examples

Service states

Recommendations

GuidancePractice
Do

Provide a label that names the status and keep it close to the affected resource.

Usage boundaries

GuidanceBoundary
Scope

The dot is a supporting indicator. Use visible text when the state affects a user's next action.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

PropTypeDefaultDescription
variant"success" | "warning" | "error" | "accent" | "neutral"—Selects the semantic status color.
labelstring—Supplies the accessible name for the fixed system-owned dot.
PreviousSpinnerNextToast

API service operational

Pair each fixed status dot with its visible meaning.

Operational

Needs attention

Unavailable

Mizen service

Not connected