KQ-681 · DUE/BADGE
Due Badge
One pill that carries an invoice's whole standing. Changing status runs a wash — a tinted layer wipes across from the left on the base tween while the pill's colour transitions beneath it — and the label swaps by sliding, the old words leaving upward on the exit ease as the new words rise on snap, with the pill's width gliding to a measured target so a long label closes rather than snapping. Overdue is the only state given ambient motion, a ring that breathes on drift; paid stamps, drawing its tick with pathLength on flick and landing the pill from 1.06 to 1 on recoil, and the whole standing is spoken once through a polite live region.
Invoice 4821 · due · $340.00
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/due-badge
Props
- status
- "due" | "overdue" | "paid"
- default "due"
- The standing. Changing it runs the wash, the label slide and that state's own motion.
- days
- number
- default —
- Whole days until the due date, or since it when overdue; drives the generated label.
- amount
- number
- default —
- Optional figure printed after the label and named in the announcement.
- format
- (value: number) => string
- default Intl.NumberFormat("en-US", { style: "currency", currency: "USD" })
- Turns the amount into its printed string. The default pins an explicit locale so server and client agree.
- labels
- Partial<Record<DueStatus, string>>
- default —
- Overrides the generated label for any state.
- size
- "sm" | "md"
- default "md"
- The 24px row badge or the 28px card badge; both keep one radius.
- name
- string
- default —
- What the badge is about ("Invoice 4821"), spoken before the state.
- announce
- boolean
- default true
- Keeps the polite live region that reads the new state once it settles.
| Prop | Type | Default | Description |
|---|---|---|---|
| status | "due" | "overdue" | "paid" | "due" | The standing. Changing it runs the wash, the label slide and that state's own motion. |
| days | number | — | Whole days until the due date, or since it when overdue; drives the generated label. |
| amount | number | — | Optional figure printed after the label and named in the announcement. |
| format | (value: number) => string | Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }) | Turns the amount into its printed string. The default pins an explicit locale so server and client agree. |
| labels | Partial<Record<DueStatus, string>> | — | Overrides the generated label for any state. |
| size | "sm" | "md" | "md" | The 24px row badge or the 28px card badge; both keep one radius. |
| name | string | — | What the badge is about ("Invoice 4821"), spoken before the state. |
| announce | boolean | true | Keeps the polite live region that reads the new state once it settles. |