#114
On avatars
Three medium avatars each carrying a status dot in success, warning or error color.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "On avatars" pattern (@codeatlasdev/ui demo #114, display/badge) in my app.
Call get_demo({ ids: ["#114"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Presence or health indicators on a user avatar.
Keep these library parts, with the props and tokens the demo uses:
- Badge, Avatar, Flex from "@codeatlasdev/ui"
Behaviour to keep:
- `<Badge dot color="success">` around `<Avatar alt="Ana Lima" size="md" />`
- `<Badge dot color="warning">` around `<Avatar alt="Carlos M" size="md" />`
- `<Badge dot color="error">` around `<Avatar alt="Diana K" size="md" />`
- `<Flex gap="4" align="center" wrap>` lays them out
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
How it is built
- `<Badge dot color="success">` around `<Avatar alt="Ana Lima" size="md" />`
- `<Badge dot color="warning">` around `<Avatar alt="Carlos M" size="md" />`
- `<Badge dot color="error">` around `<Avatar alt="Diana K" size="md" />`
- `<Flex gap="4" align="center" wrap>` lays them out
Related
Loading source.