Components
Date Picker
Picks a day or a range of days from a month grid. Calendar is the bare month; DatePicker puts one or two months in a panel, with quick ranges.
Playground
October 2026
Chosen: 29 Oct 2026
Figma variant
Date Picker
🎛 Type=Default
Date Day
Type=Day, EventDay states
Today has a primary ring, the chosen day a primary circle, a hovered day a secondary circle. Days of other months and days that cannot be chosen are medium emphasis. A range draws a primary soft band from its start to its end. An event adds a dot under the number.
| Day | Circle | Text |
|---|---|---|
| default | — | --color-foreground-level-1 |
| today | --color-primary ring | --color-primary |
| hover | --color-secondary | --color-on-secondary |
| selected | --color-primary | --color-on-primary |
| range middle | --color-primary-soft band | --color-foreground-high-emphasis |
| disabled / other month | — | --color-foreground-medium-emphasis |
| disabled selected | --color-surface-level-3 | --color-foreground-medium-emphasis |
| event dot | --color-primary (selected: --color-on-primary) | — |
Tokens
| Part | Token |
|---|---|
| Day cell / circle | 48px / 32px (--space-xxlarge) |
| Panel | --color-surface-level-1, --radius-layout-base, --shadow-depth-2xl |
| Panel padding | --space-medium + --space-tiny |
Notes from Figma
- The day and month texts use an unbound 12/16 HK Grotesk Medium style; code uses ui/text small/regular.
- Figma shows no weekday names; code labels every day with its full date for screen readers instead.
- The month grid has five weeks; code shows five or six, as the month needs.
- The Recurring End band in Figma sits at y 40 instead of 8; code draws it like Recurring Start, mirrored.
- Date Month Type=Hover (a month/year button) has no picker behind it in Figma; code shows the title as text.
- The Controls arrows are placeholder icons; code uses arrow-left and arrow-right.
- Date Filter uses the deprecated Cell; code uses Cell Small.
- The panel shadow is the primitive Depth 2XL effect; code uses --shadow-depth-2xl.
Figma to code
| Figma | React |
|---|---|
| Date Picker 🎛 Type = Basic | <Calendar /> |
| Date Picker 🎛 Type = Default | <DatePicker /> |
| Date Picker 🎛 Type = Full Control | <DatePicker mode="range" months={2} presets={…} /> |
| Date Day Type = Today / Event | today / events={[…]} |
| Date Day Type = Recurring Start / Recurring / Recurring End | mode="range" |
| Date Day Disabled | min / max / isDateDisabled |