#171
Error or offline
A load-failure state with a wifi-off icon and Retry plus Contact support buttons.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Error or offline" pattern (@codeatlasdev/ui demo #171, layout/empty-state) in my app.
Call get_demo({ ids: ["#171"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Network or fetch errors on a data panel where the user can retry or escalate.
Keep these library parts, with the props and tokens the demo uses:
- EmptyState, Button from "@codeatlasdev/ui"
Behaviour to keep:
- `<EmptyState icon={WifiOff} title="Couldn't load data" description="Check your connection and try again.">`
- `{#snippet actions()}` holds `<Button variant="outlined" size="sm">Retry</Button>` and `<Button variant="ghost" size="sm">Contact support</Button>`
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- EmptyState
@codeatlasdev/ui - Button
@codeatlasdev/ui
How it is built
- `<EmptyState icon={WifiOff} title="Couldn't load data" description="Check your connection and try again.">`
- `{#snippet actions()}` holds `<Button variant="outlined" size="sm">Retry</Button>` and `<Button variant="ghost" size="sm">Contact support</Button>`
Related
Loading source.