#113
Dot and counts
Four badges on icon buttons: a dot, a count of 3, a count of 99 and a count of 100.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Dot and counts" pattern (@codeatlasdev/ui demo #113, display/badge) in my app.
Call get_demo({ ids: ["#113"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Unread counters on notification, message and cart icons.
Keep these library parts, with the props and tokens the demo uses:
- Badge, IconButton, Flex from "@codeatlasdev/ui"
Behaviour to keep:
- `<Badge dot>` around a Bell `<IconButton aria-label="Notifications">`
- `<Badge count={3}>` around a Mail `<IconButton aria-label="Messages">`
- `<Badge count={99}>` around a ShoppingCart `<IconButton aria-label="Cart">`
- `<Badge count={100}>` around a Bell `<IconButton aria-label="Notifications">`
- `<Flex gap="4" align="center" wrap>` lays them out
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
- Badge
@codeatlasdev/ui - IconButton
@codeatlasdev/ui - Flex
@codeatlasdev/ui
How it is built
- `<Badge dot>` around a Bell `<IconButton aria-label="Notifications">`
- `<Badge count={3}>` around a Mail `<IconButton aria-label="Messages">`
- `<Badge count={99}>` around a ShoppingCart `<IconButton aria-label="Cart">`
- `<Badge count={100}>` around a Bell `<IconButton aria-label="Notifications">`
- `<Flex gap="4" align="center" wrap>` lays them out
Related
Loading source.