DueDate

A due date's label, coloured by urgency. The app formats the date and picks the tone; crisp only draws it: muted (the default), warning (due soon) and danger (overdue).

appearance="linear" opts into Linear's measured treatment. The text is neutral 12px/450 in every tone, and warning and danger become a 24px pill with a 14px calendar icon: a plain calendar for due soon, and for overdue a calendar with a filled top band and a cross. muted stays plain text. The default appearance is unchanged. IssueList renders its due dates with the linear appearance.

The top row is the default appearance, the bottom row is appearance="linear".

Installation

npm install @crisp-ui-kit/crisp

Props

DueDate also accepts every <span> attribute.

Notes

• The tone is yours to pick. DueDate does not compare dates. Decide "overdue" and "due soon" in the app and pass tone; the rendered <span> carries data-tone so it can be styled or queried.
• Colour is not the only signal in the pill. The linear warning and danger tones carry an icon as well as a colour, but the icon is decorative (aria-hidden). Put the state in the label text ("Overdue", "Tomorrow") when it matters to a screen reader.