#117
With icons
Three chips each with a leading lucide icon: star, zap and tag.
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 #117, display/chip) in my app.
Call get_demo({ ids: ["#117"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Labelled badges that gain meaning from an icon, such as featured or boosted items.
Keep these library parts, with the props and tokens the demo uses:
- Chip from "@codeatlasdev/ui"
Behaviour to keep:
- `<Chip label="Featured" icon={Star} />`
- `<Chip label="Boosted" icon={Zap} />`
- `<Chip label="Tagged" icon={Tag} />`
- `icon` receives the component itself imported from `@lucide/svelte`
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
- Chip
@codeatlasdev/ui
How it is built
- `<Chip label="Featured" icon={Star} />`
- `<Chip label="Boosted" icon={Zap} />`
- `<Chip label="Tagged" icon={Tag} />`
- `icon` receives the component itself imported from `@lucide/svelte`
Related
Loading source.