#167
Basic
An empty inbox state with an icon, a title, a description and a Compose message button.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Basic" pattern (@codeatlasdev/ui demo #167, layout/empty-state) in my app.
Call get_demo({ ids: ["#167"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: First-run or cleared lists where the user needs a clear next action.
Keep these library parts, with the props and tokens the demo uses:
- EmptyState, Button from "@codeatlasdev/ui"
Behaviour to keep:
- `<EmptyState icon={Inbox} title="No messages yet" description="Your inbox is empty. New messages will appear here.">`
- `{#snippet actions()}` holds `<Button variant="filled" size="sm">Compose message</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={Inbox} title="No messages yet" description="Your inbox is empty. New messages will appear here.">`
- `{#snippet actions()}` holds `<Button variant="filled" size="sm">Compose message</Button>`
Related
Loading source.