---
title: "State screens"
description: "What a page or a region shows instead of its content: ErrorState when it failed, LoadingState while it loads, and FullPageMessage for a whole screen before the app’s frame exists."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# State screens

## Error with a retry

The retry keeps the focus while it runs.

```tsx
import { useState } from 'react';
import { ErrorState } from '@arbol-ai/ui';

const RetryExample = () => {
  const [isRetrying, setIsRetrying] = useState(false);
  return (
    <ErrorState
      description="We couldn't load the campaign’s calls. Check your connection and try again."
      isRetrying={isRetrying}
      onRetry={() => {
        setIsRetrying(true);
        setTimeout(() => {
          setIsRetrying(false);
        }, 1500);
      }}
    />
  );
};

<RetryExample />
```

## Access error

```tsx
import { LockSimpleIcon } from '@phosphor-icons/react';
import { ButtonLink, ErrorState } from '@arbol-ai/ui';

<ErrorState
  action={
    <ButtonLink href="#/state-screens" variant="outline">
      Back to the dashboard
    </ButtonLink>
  }
  description="This page is for administrators. Ask one to give you that role."
  icon={<LockSimpleIcon aria-hidden />}
  title="Your role doesn’t open this page"
/>
```

## Loading

```tsx
import { LoadingState } from '@arbol-ai/ui';

<div className="rounded-card border">
  <LoadingState label="Loading appointments…" />
</div>
```

## Full-page message

Its own main landmark and h1, for screens outside AppShell.

```tsx
import { Button, FullPageMessage } from '@arbol-ai/ui';

<div className="rounded-card overflow-hidden border">
  <FullPageMessage
    action={<Button>Sign in again</Button>}
    className="min-h-96"
    description="You can sign in again whenever you like."
    title="You signed out"
  />
</div>
```

## Source

The examples above are [`src/components/state-screen/state-screen.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/components/state-screen/state-screen.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/feedback/state-screen/index.mdx