# DueChip

> A due date as a chip: neutral while it is far off, warning from `soonDays` before, danger once past.

Source: https://ui.jcsoftdev.com/docs/components/due-chip

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

```ts
import { DueChip } from "@jcsoftdev/ui/atoms";
```

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

## Usage

```tsx
<DueChip date="2026-03-20" today="2026-03-04" />
```

## 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

- [Ok](/storybook/?path=/story/atoms-duechip--ok)
- [Soon](/storybook/?path=/story/atoms-duechip--soon)
- [Due Today](/storybook/?path=/story/atoms-duechip--due-today)
- [Overdue](/storybook/?path=/story/atoms-duechip--overdue)
- [Done Is Never Overdue](/storybook/?path=/story/atoms-duechip--done-is-never-overdue)
- [Soon Window](/storybook/?path=/story/atoms-duechip--soon-window)
- [Naive Date Time And Year](/storybook/?path=/story/atoms-duechip--naive-date-time-and-year)
- [Spanish](/storybook/?path=/story/atoms-duechip--spanish)
- [Unreadable Date Is Shown As Given](/storybook/?path=/story/atoms-duechip--unreadable-date-is-shown-as-given)
- [Forced State](/storybook/?path=/story/atoms-duechip--forced-state)

## Source

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