ErrorState

What a page or a panel shows when loading failed.

Rounds did not load

The server did not answer (tries: 0).

error-state.example.svelte

<script lang="ts">
  import { ErrorState } from '@onlywin/ui-svelte';

  let tries = $state(0);
</script>

<ErrorState
  title="Rounds did not load"
  description={`The server did not answer (tries: ${tries}).`}
  onRetry={() => (tries += 1)}
/>

Usage

Do

Offer a retry when retrying can work.

Don’t

Do not show error codes alone; say what happened.

Accessibility

An alert, so screen readers hear it at once; the retry is a button.

Keyboard

ErrorState keyboard interactions
Keys	Action
`Enter, Space`	Activate

Props

The same props in both frameworks. In React, class is className, events are camelCase (onClick), content passed as Svelte snippets is a ReactNode prop, every bindable value has a default… twin for uncontrolled use, and elementRef reaches the DOM element.

ErrorState props
Prop	Type	Default
`description`	`string`	—
`onRetry`	`() => void`	—
`retryLabel`	`string`	—
`title`	`string`	—