Content & Data
Calendar Day
Calendar Day is a single selectable day cell inside a month calendar grid.
State (Default/Today/Selected/Disabled/Outside) — 5 variants
stableReact AvailableFigma AvailableDocs Partial
- React last updated
- 2026-07-12
- Documentation last updated
- 2026-06-01
- Accessibility target
- WCAG 2.2 AA (target)
- Version
- 1.0.0
Known open questions
- Range Start / Range End / Range Middle / range preview are React-first · Figma parity pending — live Calendar Day masters only expose Default, Today, Selected, Disabled, and Outside (set 2058:2146). Do not invent Figma range variants for Stable-v1.
- Hover, selected hover, pressed, and focused Calendar Day visuals remain unverified against Figma masters.
- Calendar Day should be composed inside Calendar Grid — not used standalone without grid context.
Live preview
Single day cell — intended for use inside Calendar Grid.
Default / today / selected / disabled / outside month
Visible day numbers use full-date accessible names such as “14 July 2026”. Today uses the verified inside stroke rather than a separate dot.
Purpose
A single day cell within a full Calendar month grid — the actual date-picker popover Date Picker's input field needed but didn't include.
Anatomy
Calendar Day = native button + visible day number. Today is represented by the verified inside stroke.
Variants and states
default · today · selected · disabled · outside
When to use
Composed together (7×6 grid) to build the calendar popover for Date Picker.
When not to use
Standalone outside a full Calendar composition.
Accessibility
role="grid" with role="gridcell", full arrow-key navigation. Disabled dates need aria-disabled.
Common mistakes
Conflating "Outside" (adjacent month, often still clickable) with "Disabled" (blocked-out, never selectable) — they look similar but mean different things.
Properties
State as variants. Number (text).
What is the difference between today and selected?
Today marks the current calendar date with an inside stroke. Selected marks the chosen value with the Surface-dependent primary fill.
How is a Calendar Day labelled for screen readers?
Each day exposes a full understandable date such as “14 July 2026”, not only the visible numeral.
Can Calendar Day be used outside Calendar Grid?
Only for previews or documentation. Production usage should compose Calendar Day through Calendar Grid for keyboard and grid semantics.
Tokens used
semantic/action/primarysemantic/text/primarysemantic/text/disabledradius/full
Component API
| Prop | Type | Default | Description |
|---|---|---|---|
| date | YYYY-MM-DD | — | Canonical date-only value. |
| selected | boolean | — | Selected state. |
| today | boolean | — | Highlights current date. |
| disabled | boolean | — | Non-selectable day. |
| outsideMonth | boolean | — | Adjacent-month day styling. |
| onDateSelect | (date) => void | — | Pointer selection callback. |
React example
Copy React example
import { CalendarDay } from "@/components/ui/CalendarDay";
export function Example() {
return <CalendarDay date="2026-07-14" selected />;
}