# Status

> Full-page states for errors and interruptions: code "404", "500", "403", "maintenance", "offline", or your own title / text / icon / tint.

Pattern · Pro kit · [Live page](https://ui.twentyfirst.media/pro/patterns/StatusScreen/)

Full-page states for errors and interruptions: `code` "404", "500", "403", "maintenance", "offline", or your own `title` / `text` / `icon` / `tint`.

Props: `code`, `title`, `text`, `icon`, `tint`, `extra` (search field, progress), `actions` (defaults to Back to overview + Contact support), `onHome`, `onContact`, `reference` (request id for support).

- Say what happened, that the person's data is safe, and what to do next, in that order.
- Show a request reference on server errors so support can find it.
- Keep the TopBar when you can (404, 403); go full screen only when the app itself is down.

## Code

```tsx
import * as React from "react";
import { Button, StatusScreen, UsageMeter } from "@twentyfirstmedia/pro";

export default function Preview() {
  return (
    <div
      className="tf-grid"
      style={
        {
          "--cols": "1fr 1fr",
          gap: 16,
        } as React.CSSProperties
      }
    >
      <div className="tf-panel">
        <StatusScreen code="404" />
      </div>
      <div className="tf-panel">
        <StatusScreen code="500" reference="req_8f2a91c4" />
      </div>
      <div className="tf-panel">
        <StatusScreen
          code="maintenance"
          extra={
            <div
              style={{
                width: "100%",
                maxWidth: 300,
              }}
            >
              <UsageMeter label="Upgrade progress" used={72} limit={100} format={(v) => v + "%"} />
            </div>
          }
        />
      </div>
      <div className="tf-panel">
        <StatusScreen
          code="offline"
          actions={[
            <Button key="r" icon="refresh">
              Try again
            </Button>,
          ]}
        />
      </div>
    </div>
  );
}
```

## Props

### Button

| Prop | Type | Notes |
| --- | --- | --- |
| `variant?` | `"primary" \| "secondary" \| "soft" \| "ghost" \| "danger" \| "danger-solid"` |  |
| `size?` | `"md" \| "sm"` |  |
| `icon?` | `IconName` |  |
| `iconRight?` | `IconName` |  |
| `disabled?` | `boolean` |  |
| `type?` | `"button" \| "submit" \| "reset"` |  |
| `onClick?` | `(e: MouseEvent<HTMLButtonElement>) => void` |  |
| `children?` | `ReactNode` |  |
| `asChild?` | `boolean` | Render the single child element (a link, a router Link) with the button's look instead of a <button>. |
| `id?` | `string` |  |
| `name?` | `string` | Form field name and value, sent with the form when this button submits it. |
| `value?` | `string` |  |
| `form?` | `string` | The id of the form this button belongs to, when it sits outside it. |
| `title?` | `string` |  |
| `tabIndex?` | `number` |  |
| `autoFocus?` | `boolean` |  |
| `aria-label?` | `string` |  |
| `aria-labelledby?` | `string` |  |
| `aria-describedby?` | `string` |  |
| `aria-expanded?` | `boolean \| "true" \| "false"` | For disclosure and menu triggers: whether what the button controls is open. |
| `aria-controls?` | `string` |  |
| `aria-haspopup?` | `boolean \| "true" \| "false" \| "menu" \| "listbox" \| "tree" \| "grid" \| "dialog"` |  |
| `aria-pressed?` | `boolean \| "true" \| "false" \| "mixed"` | For toggle buttons. |
| `aria-current?` | `boolean \| "true" \| "false" \| "page" \| "step" \| "location" \| "date" \| "time"` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### StatusScreen

| Prop | Type | Notes |
| --- | --- | --- |
| `code?` | `"404" \| "500" \| "403" \| "maintenance" \| "offline" \| string` |  |
| `title?` | `string` |  |
| `text?` | `string` |  |
| `icon?` | `IconName` |  |
| `tint?` | `Tint` |  |
| `extra?` | `ReactNode` |  |
| `actions?` | `ReactNode[]` |  |
| `onHome?` | `() => void` |  |
| `onContact?` | `() => void` |  |
| `reference?` | `string` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### UsageMeter

| Prop | Type | Notes |
| --- | --- | --- |
| `used` | `number` | Required |
| `limit` | `number` | Required |
| `label?` | `string` |  |
| `caption?` | `string` |  |
| `format?` | `(v: number) => string` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |