edible-badge

A pill-style status badge. The element itself is the badge surface — no wrapper needed. Use the type attribute to switch colour variant.

Variants

Default (accent colour) plus three semantic types.

New Active Pending Failed

Inline with text

Badges are display: inline-flex and sit naturally in a line of text.

Pull request #42 Merged was reviewed yesterday.

Issue #17 Closed has been resolved.

Release 2.0 Draft is awaiting approval.

Inside a table

Common pattern: status column in a data table.

Task Assignee Status
Design review Alice Done
API integration Bob In progress
Write tests Carol Backlog
Deploy to staging Dave Blocked

Dynamic type via JavaScript

Set or remove the type attribute at any time — the CSS attribute selector picks up the change immediately.

New

← All examples