#002
With icons
Buttons with an icon before the label, after the label, and with a ghost download action.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "With icons" pattern (@codeatlasdev/ui demo #002, inputs/button) in my app.
Call get_demo({ ids: ["#002"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Actions that benefit from an icon cue: favourite, continue to next step, download.
Keep these library parts, with the props and tokens the demo uses:
- Button from "@codeatlasdev/ui"
Behaviour to keep:
- Leading icon goes in `{#snippet leading()}` (`Star` from `@lucide/svelte`, `size={15}`)
- Trailing icon goes in `{#snippet trailing()}` (`ArrowRight`, `size={15}`)
- Variants shown: `variant="filled"`, `variant="outlined"`, `variant="ghost"`
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
- Button
@codeatlasdev/ui
How it is built
- Leading icon goes in `{#snippet leading()}` (`Star` from `@lucide/svelte`, `size={15}`)
- Trailing icon goes in `{#snippet trailing()}` (`ArrowRight`, `size={15}`)
- Variants shown: `variant="filled"`, `variant="outlined"`, `variant="ghost"`
Related
Loading source.