Move backward or forward through adjacent calendar periods while naming the period currently shown. It is the compact toolbar control for stepping a day, month, or year; choosing an arbitrary date or range from a calendar belongs to DatePicker.
Native previous and next buttons form one start-edge cluster before a non-interactive time label. The host owns date arithmetic and formatting; the component owns the equal height and complete type recipe that let it sit beside SegmentedControl without correction.
The arrows are real buttons and the current month is a semantic, polite-live label. This reference proves presentation and native activation; the host supplies the month change.
The sm/md/lg axis shares size.interactive and the complete button-sm/md/lg typography recipes with SegmentedControl and Button. Each row pairs the components at one tier; their outer edges and baselines must agree without margins, transforms, or local font declarations.
| Example | Size | Height | Type | Usage |
|---|---|---|---|---|
| Small | size.interactive.sm | button-sm | Dense dashboard toolbars | |
| Medium | size.interactive.md | button-md | Default application controls | |
| Large | size.interactive.lg | button-lg | Roomier or touch-led toolbars |
State belongs to each native step button. A bounded direction disables in place so the control keeps its geometry and communicates the edge of the available range.
| Example | State | Driver | Roles | Usage |
|---|---|---|---|---|
| Hover | :hover | action.ghost.hover | Preview one adjacent step | |
| Active | :active | action.ghost.active | Press confirmation | |
| Focus | :focus-visible | focus.ring | Keyboard focus on one direction | |
| Disabled | :disabled | action.disabled.text | A real range boundary |
DateNavigator moves through adjacent context; it does not choose from the whole calendar.
| Verdict | Rule |
|---|---|
| Do | Name both step buttons with the period granularity, such as Previous month and Next month. |
| Do | Match its size modifier to adjacent controls and keep the current period in a semantic time element. |
| Don’t | Use it when someone needs arbitrary date entry, a calendar grid, or a range — that is DatePicker. |
| Don’t | Repair a mismatched toolbar with local height, font, transform, or negative-margin overrides. |