#900
Inline pill
A follow-up list where each row has a title and an inline subtle Badge pill with a status dot: Overdue (danger), Due today (warning), Done (success) and a neutral Draft without a dot.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Inline pill" pattern (@codeatlasdev/ui demo #900, display/badge) in my app.
Call get_demo({ ids: ["#900"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Status pills next to a title in lists and queues. The pill sits in text flow; it is not anchored to a corner like a count badge.
Keep these library parts, with the props and tokens the demo uses:
- Badge from "@codeatlasdev/ui"
Behaviour to keep:
- Unstyled list with a grid and `gap: var(--ca-space-2)`; each `li` is a wrapping flex row
- Title `span` in `--ca-text-primary`, followed by `<Badge tone="danger" subtle dot size="md">Overdue</Badge>`
- `tone="warning"` Due today and `tone="success"` Done, both `subtle dot size="md"`
- `tone="neutral" subtle size="md"` Draft with no dot
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
- Badge
@codeatlasdev/ui
How it is built
- Unstyled list with a grid and `gap: var(--ca-space-2)`; each `li` is a wrapping flex row
- Title `span` in `--ca-text-primary`, followed by `<Badge tone="danger" subtle dot size="md">Overdue</Badge>`
- `tone="warning"` Due today and `tone="success"` Done, both `subtle dot size="md"`
- `tone="neutral" subtle size="md"` Draft with no dot
Related
Loading source.