Date Tile

A calendar tile — a short month over the day in a 44px square — for a due date, a renewal or a scheduled run. It renders a <time>, and the caller formats both lines, so the tile carries no locale or timezone logic.

tsx

1import { DateTile } from "@pestoui/core"

Tones

Each tone is a wash with its -ink token on top, so the text clears AA on every fill. muted is the default.

OCT14OCT21OCT28NOV3NOV9

In a row

The tint says how the charge is paid; the icon beside the date says the same in a shape, so the colour is never the only cue.

OCT28

Workspace plan

Autopay on October 28

OCT21

Extra run credits

Pay manually by October 21

Props

Prop	Type	Default	Description
dateTime	string	—	The machine-readable date on the <time> element — "2026-10-14".
month	ReactNode	—	The top line, already formatted — "OCT".
day	ReactNode	—	The bottom line, already formatted — "14".
tone	"muted" \| "warning" \| "success" \| "info" \| "destructive"	"muted"	The wash and its ink. Emitted as data-tone.
className	string	—	On the root <time>. Every other time prop is spread there too.

PreviousDate Picker Next Description List

Pesto UI · 117 documented components