Zetta v1.6

Components · Data display & feedback

Date label

A small relative-date marker that colours itself by urgency — overdue in danger, today in semantic warning, upcoming in muted grey. For due dates on cards, list rows and tasks.

Preview

Overdue · Mar 3 Due today Due Mar 21

Build with the skill

No package to install — hand this to your AI to generate or migrate the component in your stack.

Prompt for your AI 
Apply the Zetta "Date label" component to this project using the zetta-design-md skill.

WHEN TO USE
- Migrating or fixing existing code (the common case): audit the current implementation against the `date-label` spec (variants: overdue, today, upcoming) and CORRECT every deviation — replace off-spec values, don't only add new ones.
- New component: build it to the `date-label` spec in this project's stack.

AUDIT & FIX (when the component already exists)
Compare it to the skill's spec and fix, don't just append: hardcoded colors/hex, off-scale radius, wrong fonts, dark/navy fills, shadows used in place of borders (or missing borders), brand lime used as a CTA or interaction (must be primary indigo), and any missing or wrong hover / focus / active / disabled / invalid state or missing 2px focus ring. Replace each with the correct Zetta token.

ALWAYS
- Pull the authoritative spec and tokens from the skill — never guess or hardcode values.
- Use this project's own component conventions and framework idioms.
- Honor the Zetta guardrails (brand = identity only, primary = interaction, shadows for overlays) and verify in Light, Dark, and Accessibility.

Anatomy & rules

📅 Jan 15, 2024        ← date-label (absolute)
⚠️ 3 days overdue      ← date-label-overdue
🕐 Due today           ← date-label-today
State Visual
Default Formatted date string in {colors.body}
Overdue {colors.danger} text
Due soon {colors.warning} text
Relative "Today", "Yesterday", "3 days ago" — {colors.muted}

When to use

  • Due dates on tasks, issues, and cards.
  • Created/updated timestamps in list rows and detail panels.
  • Any read-only date that needs contextual urgency signaling.

When not to use

Do

  • Use format: smart by default — relative dates are more scannable for recent items.
  • Show an icon (showIcon: true) when the date label appears without surrounding date context.

Don't

  • Don't rely on color alone for overdue state — pair with a label ("Overdue") or icon.
  • Format: follow locale. Default: DD MMM YYYY (e.g. "25 Jun 2026"). Never use ambiguous formats like 06/07/2026.
  • Relative dates: "Today", "Yesterday", "N days ago" (up to 7 days). Beyond 7 days, use absolute date.
  • Overdue: show the date, not "Overdue". Let color and the date itself communicate urgency.
  • Time: append time only when time-of-day is relevant: "25 Jun 2026, 14:30".

Keyboard

Date Label is non-interactive and has no keyboard behavior.

Accessibility

  • Date label text must be human-readable, not raw ISO string.
  • For relative dates, include the absolute date in a title attribute or aria-label: aria-label="Due January 15 2024 — 3 days overdue".
  • Overdue color ({colors.danger}) meets 4.5:1 on white; pair with text or icon for non-color-reliant users.

Spec

Values and token references resolved straight from the Zetta spec.

date-label
fontFamily
Geist
fontSize
12px
fontWeight
400
lineHeight
1.5
textColor
{colors.muted}
date-label-overdue
textColor
{colors.danger}
fontWeight
500
date-label-today
textColor
{colors.warning}
fontWeight
500
date-label-upcoming
textColor
{colors.muted}
date-label-icon
size
{icons.sizeMap.sm}
color
{colors.muted}
marginRight
{spacing.xs}
date-label-icon-overdue
color
{colors.danger}