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
  • Anatomy
  • Examples
  • Canonical retry
  • Composed recovery actions
  • Diagnostic details
  • Framed region
  • Semantic heading hierarchy
  • Recommendations
  • Usage boundaries
  • API reference

Feedback

Error State

Communicates retryable load failures, connection drops, or missing resources with destructive media, heading, description, and action slots.

idle

Usage

import {
	ErrorState,
	ErrorStateContent,
	ErrorStateDescription,
	ErrorStateHeader,
	ErrorStateMedia,
	ErrorStateTitle,
} from "@mizen-labs/ui";

Anatomy

The parts and how they nest, taken from the preview above.

<ErrorState>
	<ErrorStateHeader>
		<ErrorStateMedia />
		<ErrorStateTitle />
		<ErrorStateDescription />
	</ErrorStateHeader>
	<ErrorStateContent />
</ErrorState>

Examples

Canonical retry

Standard failure presentation with destructive icon, title, description, and primary retry action.

Composed recovery actions

Presents multiple recovery options arranged with responsive Grid layout.

Diagnostic details

Presents technical error identifiers and status codes using Badge and Code primitives.

Framed region

Compose an accessible error region inside a Frame panel.

Semantic heading hierarchy

Configures semantic heading levels to maintain a continuous outline under nested subsections.

Recommendations

GuidancePractice
Do

Explain the failed operation and provide a realistic recovery action. Preserve usable content and entered values.

Usage boundaries

GuidanceBoundary
Scope

Use Field Error for one invalid input and Empty for successful zero-result queries.

API reference

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

PropTypeDefaultDescription
level1 | 2 | 3 | 4 | 5 | 63Semantic heading level for ErrorStateTitle, rendering matching native h1 through h6.
roleAriaRole—Optional ARIA role; defaults to neutral root with no live region, overridable to region with aria-labelledby.
ErrorStateErrorStateProps—Root compound container for the error state layout with responsive centered alignment.
ErrorStateHeaderErrorStateHeaderProps—Header slot that groups media, title, and description with constrained max width.
ErrorStateMediaErrorStateMediaProps—Destructive-tinted icon container; defaults to aria-hidden.
ErrorStateTitleErrorStateTitleProps—Semantic heading slot for the primary error state title.
ErrorStateDescriptionErrorStateDescriptionProps—Paragraph slot for supporting error description copy.
ErrorStateContentErrorStateContentProps—Content slot for recovery action buttons and secondary controls.
PreviousEmptyNextMeter

Dashboard unavailable

The latest metrics could not be loaded.

Failed to load dashboard

An unexpected error occurred while fetching analytics. Please try again.

Connection interrupted

Lost connection to the primary database replica. Check network settings or reconnect.

Gateway timeout

The upstream service did not respond within the configured timeout threshold.

HTTP 504GATEWAY_TIMEOUT_ERR
Cluster monitor
Live cluster health status and alerts.

Cluster synchronization failed

Node heartbeat timed out after three consecutive retries.

Service failure notice

Payment processor unavailable

Unable to reach the payment gateway. Invoices cannot be processed at this time.