Skip to content
@jcsoftdev/ui

DueChip

Open .md
Live preview

Loading example…

A due date as a chip: neutral while it is far off, warning from soonDays before, danger once past. The tone is never the only signal: overdue and soon chips carry a status glyph and a screen-reader state. Renders <time datetime>; an unreadable date is shown as given.

Import

Section titled “Import”
import { DueChip } from "@jcsoftdev/ui/atoms";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/atoms/due-chip.

Usage

Section titled “Usage”
<DueChip date="2026-03-20" today="2026-03-04" />

Props

Section titled “Props”
Prop Type Default Description
date * string Due date: “2026-03-04”, a naive date-time “2026-03-04T17:00”, or an ISO instant (read in the viewer’s zone).
today string Reference day (“YYYY-MM-DD”) the state is measured from. Defaults to the viewer’s today; pass it for deterministic output (server render, tests, “as of” views).
soonDays number Days ahead (inclusive of today) that count as soon. Defaults to 3.
state "done" | "overdue" | "soon" | "ok" Forces the state regardless of the date, for a status the date alone cannot tell (a payment that is late by policy, a hold). done is the neutral finished look. Wins over done.
done boolean false A finished item is never overdue or soon: the chip stays neutral.
children ReactNode Replaces the formatted date text.
locale string
onClick MouseEventHandler<HTMLSpanElement> A chip with onClick (or role="button") is interactive and never shorter than 30px (--control-height-sm), the smallest hit area of the kit, whatever its size.
icon ReactNode Leading decorative icon; wins over statusIcon.
size "sm" | "md" sm is the compact tag: it grows with its content, tightens the padding and uses tabular numerals, so codes, counts and ids line up. Pair it with square and a neutral tone for a tag.
square boolean Use the smaller chip radius instead of a full pill.
removeLabel string Accessible name of the remove button. Defaults to the localized “Remove”.

* marks a required prop.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

Section titled “Storybook stories”

Source

Section titled “Source”

packages/ui/src/atoms/due-chip/due-chip.tsx