Components / Patterns
State panel
Loading, empty, error, stale and offline states.
@fabrials/ui
No accounts yet
Add a provider account to start a sync.
Could not load accounts
Compact and inline, for a drawer or a palette.
Installation
Import the control from
@fabrials/ui, after setting the app up.TypeScript import { StatePanel } from "@fabrials/ui";
API reference
| Prop / export | Type | Description |
|---|---|---|
state | loading | empty | error | stale | offline | success | Which state this is. |
title | ReactNode | What happened. |
description | ReactNode | What the person can do. |
actions | ReactNode | The recovery action. |
size | md | sm | sm is 16 px of padding, for a drawer, popover, sidebar or list slot; the icon and text are the same. |
variant | panel | inline | inline has no border and no tint (an overlay or palette); the icon still carries the state. |
fill | boolean | Takes the height of a region that has one and centres the content (an empty reader pane). |
align | start | center | Where the icon and text sit. |
Behavior
A stale observation is not shown as a fresh value. A configured connection is not proof that it can be reached.
Accessibility
Keyboard and contrast
Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.