Custom Layout

Reorder picker panel sections and inject custom action bars with layout slots.

Popover and inline calendar pickers expose slot components such as PickerLayoutActionBarSlot so product teams can place shortcuts, calendars, and custom actions in a consistent vertical stack without forking the picker implementation.

  • Calendars that need a clear action below the grid (Clear, Apply, Cancel)
  • Layouts where shortcut chips must stay above the month grid but actions sit below
  • Branded picker panels that add secondary controls without replacing core surfaces
  • Choose a picker that supports layout slots (for example DateCalendar).
  • Pass shortcut presets through appearance.shortcuts when needed.
  • Provide child content inside PickerLayoutActionBarSlot for buttons or links below the grid.
  • Use Orbital Button for actions — not raw HTML buttons.
Action bar below calendar

Shortcut presets stay above the grid; a custom action bar clears the selection below.

July 2026
SunMonTueWedThuFriSat
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1