#160
Basic
A popover opened from a button, containing a sentence of text and a Confirm 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 #160, navigation/popover) in my app.
Call get_demo({ ids: ["#160"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Short contextual help or a quick confirmation anchored to the element that triggered it.
Keep these library parts, with the props and tokens the demo uses:
- Popover, Button, Stack from "@codeatlasdev/ui"
Behaviour to keep:
- `<Popover>` with `{#snippet triggerChild(props)}<Button {...props}>Open popover</Button>{/snippet}`
- Content is `<Stack gap="3">` with a paragraph and `<Button size="sm" variant="filled">Confirm</Button>`
- Paragraph text: This is a basic popover with some content inside.
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
How it is built
- `<Popover>` with `{#snippet triggerChild(props)}<Button {...props}>Open popover</Button>{/snippet}`
- Content is `<Stack gap="3">` with a paragraph and `<Button size="sm" variant="filled">Confirm</Button>`
- Paragraph text: This is a basic popover with some content inside.
Related
Loading source.