#112
Colors
A notification bell icon button wrapped in a count badge, shown in the four badge colors.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Colors" pattern (@codeatlasdev/ui demo #112, display/badge) in my app.
Call get_demo({ ids: ["#112"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Telling apart badge meaning on a counter: brand, success, warning and error.
Keep these library parts, with the props and tokens the demo uses:
- Badge, IconButton, Flex from "@codeatlasdev/ui"
Behaviour to keep:
- `<Flex gap="4" align="center" wrap>` wraps four badges
- Each is a `<Badge count={5}` around `<IconButton aria-label="Notifications">` with a `<Bell size={20} />`
- `color="brand"`, `color="success"`, `color="warning"` and `color="error"` are the four variants
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
- `<Flex gap="4" align="center" wrap>` wraps four badges
- Each is a `<Badge count={5}` around `<IconButton aria-label="Notifications">` with a `<Bell size={20} />`
- `color="brand"`, `color="success"`, `color="warning"` and `color="error"` are the four variants
Related
Loading source.