StatusChip

Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.

Build the "StatusChip" pattern (@codeatlasdev/ui demo #119, display/chip) in my app.

Call get_demo({ ids: ["#119"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Showing the state of a record, such as active, pending, failed, scheduled or draft, in tables and lists.

Keep these library parts, with the props and tokens the demo uses:
- StatusChip from "@codeatlasdev/ui"

Behaviour to keep:
- `<StatusChip status="success" label="Active" />`
- `<StatusChip status="warning" label="Pending" />`
- `<StatusChip status="error" label="Failed" />`
- `<StatusChip status="info" label="Scheduled" />`
- `<StatusChip status="neutral" label="Draft" />`

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

• StatusChip @codeatlasdev/ui

How it is built

• `<StatusChip status="success" label="Active" />`
• `<StatusChip status="warning" label="Pending" />`
• `<StatusChip status="error" label="Failed" />`
• `<StatusChip status="info" label="Scheduled" />`
• `<StatusChip status="neutral" label="Draft" />`

Related

• #120 Variants and size component/display
• #900 Inline pill component/display
• #115 Basic component/display
• #104 Closable component/display
• #105 Severities component/display
• #106 With title component/display