Sizes

Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.

Build the "Sizes" pattern (@codeatlasdev/ui demo #102, feedback/spinner) in my app.

Call get_demo({ ids: ["#102"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Choosing a spinner size: small for inline text and buttons, large for page or section loaders.

Keep these library parts, with the props and tokens the demo uses:
- Spinner, Flex from "@codeatlasdev/ui"

Behaviour to keep:
- `<Spinner size={16} />`
- `<Spinner size={24} />`
- `<Spinner size={40} />`
- Wrapped in `<Flex gap="6" align="center">`

Reduced motion: the demo handles it; keep that branch.
Keyboard: not an interactive control.

Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours.

Library parts

• Spinner @codeatlasdev/ui
• Flex @codeatlasdev/ui

How it is built

• `<Spinner size={16} />`
• `<Spinner size={24} />`
• `<Spinner size={40} />`
• Wrapped in `<Flex gap="6" align="center">`

Related

• #101 Section loader component/feedback
• #100 In a button component/feedback
• #094 Indeterminate component/feedback
• #097 Card layout component/feedback
• #241 The skeleton prop component/feedback
• #080 Async onconfirm component/feedback