Badge · tags · chips
Status badges in six tones and three looks with live dots, counts that sit on a corner and pop when they change, toggleable filter chips, removable tags, and a tag input that validates, dedupes, and takes pasted lists.
Badges · soft · solid · outline
Neutral
Primary
Success
Warning
Danger
Info
Neutral
Primary
Success
Warning
Danger
Info
Neutral
Primary
Success
Warning
Danger
Info
Online
Deploying
Failed
v2.4.0
Pro
Large
Counts on a corner · they pop when they change
33 unread
A
999+1280 new
Filter chips · click to toggle
Filtering by: Remote, Engineering
Removable · with avatars
AAdaGGraceAAlanLLinus
Tag input · Enter or comma adds · paste a list · Backspace twice removes
Usage
import { signal } from "./index.js";import { Badge, Tag, TagInput, Indicator } from "./components/badge.js"; Badge({ label: "Beta", tone: "primary" }) // tone: neutral primary success warning danger infoBadge({ label: "Online", tone: "success", dot: true, pulse: true, variant: "solid" | "outline" }) Indicator({ count: unread, children: bellButton }) // 99+ past max; pops when it changesIndicator({ dot: true, pulse: true, tone: "success", children: avatar }) Tag({ label: "Remote", selected: remote }) // a toggle chip (aria-pressed)Tag({ label: "Ada", avatar: "/ada.png", onRemove: () => … }) // shrinks away, then removes const skills = signal(["javascript"]);TagInput({ value: skills, max: 8, suggestions: [...], validate: (t) => t.length < 20 || "Too long" })