#144
On icon buttons
Four icon-only buttons (Info, Heart, Zap, Star) that each reveal a Tooltip describing the action.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "On icon buttons" pattern (@codeatlasdev/ui demo #144, display/tooltip) in my app.
Call get_demo({ ids: ["#144"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Icon-only toolbar actions that need a visible text label on hover or focus.
Keep these library parts, with the props and tokens the demo uses:
- Tooltip, IconButton from "@codeatlasdev/ui"
Behaviour to keep:
- Each `Tooltip` uses `{#snippet triggerChild(props)}` with `<IconButton aria-label="Info" {...props}>`
- Icons from `@lucide/svelte`: `<Info size={20} />`, `<Heart size={20} />`, `<Zap size={20} />`, `<Star size={20} />`
- Tooltip content: Info, Add to favourites, Boost performance, Rate this component
- Other `aria-label` values: `aria-label="Favourite"`, `aria-label="Boost"`, `aria-label="Rate"`
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
- Tooltip
@codeatlasdev/ui - IconButton
@codeatlasdev/ui
How it is built
- Each `Tooltip` uses `{#snippet triggerChild(props)}` with `<IconButton aria-label="Info" {...props}>`
- Icons from `@lucide/svelte`: `<Info size={20} />`, `<Heart size={20} />`, `<Zap size={20} />`, `<Star size={20} />`
- Tooltip content: Info, Add to favourites, Boost performance, Rate this component
- Other `aria-label` values: `aria-label="Favourite"`, `aria-label="Boost"`, `aria-label="Rate"`
Related
Loading source.