Feedback

ErrorState

Centered error placeholder with a title, description, optional detail, and optional retry button for a region whose data failed to load.

import { ErrorState } from '@lostgradient/cinder';
feedbackerror
01

Overview

Reference usage

Placeholder layout for a region whose data failed to load, with a title, description, optional detail, and an optional retry button. It renders through Alert with the danger variant, so the failure is announced and never looks like an empty result.

Usage

svelte 
<script lang="ts">
  import { ErrorState } from '@lostgradient/cinder';
</script>

<ErrorState
  title="Could not load runs"
  description="The server did not respond in time."
  detail="E_TIMEOUT"
  onRetry={() => console.log('retry')}
/>
Live preview

With retry

Retried 0 times.

02

When to use

Use when
  • Replacing a primary content region after its query or request failed, so the failure never looks like an empty result.
  • Offering the user a retry for a region that can be reloaded.
Avoid when
  • Communicating that a region has no data — use empty-state instead.
  • Reporting the result of a just-completed action — use alert or toast-region.
03

Examples

With retry

A failed query with a fault code and a retry button.

Without retry

Omit onRetry when the failure cannot be retried from this region.

04

Props

Props for error-state
Name
Type
Default
Description
title required text Primary heading text rendered as a heading element at the configured headingLevel.
description required text Secondary descriptive text rendered as a paragraph below the title.
detail text Optional technical detail, such as a fault code, rendered below the description.
onRetry () => void Called when the retry button is activated. The retry button renders only when this is given.
retryLabel text 'Try again' Label of the retry button.
headingLevel 123456 2 Heading level for the title element.