---
url: "https://vueda.dev/v3/reference/theming/keys/CalendarNavButton.md"
title: "CalendarNavButton"
---

# CalendarNavButton

Source: `client/lib/theme/vueda-tailwind/controls/index.js`

> The prev / next month button anchored to a [CalendarHeader.root](/v3/reference/theming/keys/CalendarHeader.md#theme-key-CalendarHeader-root). Composes [\_ButtonBase.root](/v3/reference/theming/keys/_ButtonBase.md#theme-key-_ButtonBase-root) plus [\_ButtonOutline.root](/v3/reference/theming/keys/_ButtonOutline.md#theme-key-_ButtonOutline-root) for the neutral chip recipe, then overrides to a square 28×28 transparent chip with `opacity-50` at rest and full opacity on hover so the chrome stays out of the way until the user reaches for it. One theme key serves both directional SFCs (CalendarPrevButton, CalendarNextButton); the [RangeCalendarPrevButton.root](/v3/reference/theming/keys/RangeCalendarPrevButton.md#theme-key-RangeCalendarPrevButton-root) / [RangeCalendarNextButton.root](/v3/reference/theming/keys/RangeCalendarNextButton.md#theme-key-RangeCalendarNextButton-root) pair on the range side stays split. Whether the two sides should converge on one shape is unsettled.

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/CalendarNavButton.md#theme-key-CalendarNavButton-root) | `size-7 bg-transparent p-0 opacity-50 hover:opacity-100` | The prev / next month button anchored to a [CalendarHeader.root](/v3/reference/theming/keys/CalendarHeader.md#theme-key-CalendarHeader-root). Composes [\_ButtonBase.root](/v3/reference/theming/keys/_ButtonBase.md#theme-key-_ButtonBase-root) plus [\_ButtonOutline.root](/v3/reference/theming/keys/_ButtonOutline.md#theme-key-_ButtonOutline-root) for the neutral chip recipe, then overrides to a square 28×28 transparent chip with `opacity-50` at rest and full opacity on hover so the chrome stays out of the way until the user reaches for it. One theme key serves both directional SFCs (CalendarPrevButton, CalendarNextButton); the [RangeCalendarPrevButton.root](/v3/reference/theming/keys/RangeCalendarPrevButton.md#theme-key-RangeCalendarPrevButton-root) / [RangeCalendarNextButton.root](/v3/reference/theming/keys/RangeCalendarNextButton.md#theme-key-RangeCalendarNextButton-root) pair on the range side stays split. Whether the two sides should converge on one shape is unsettled. |

<a id="theme-key-CalendarNavButton-root"></a>

## root

> The prev / next month button anchored to a [CalendarHeader.root](/v3/reference/theming/keys/CalendarHeader.md#theme-key-CalendarHeader-root). Composes [\_ButtonBase.root](/v3/reference/theming/keys/_ButtonBase.md#theme-key-_ButtonBase-root) plus [\_ButtonOutline.root](/v3/reference/theming/keys/_ButtonOutline.md#theme-key-_ButtonOutline-root) for the neutral chip recipe, then overrides to a square 28×28 transparent chip with `opacity-50` at rest and full opacity on hover so the chrome stays out of the way until the user reaches for it. One theme key serves both directional SFCs (CalendarPrevButton, CalendarNextButton); the [RangeCalendarPrevButton.root](/v3/reference/theming/keys/RangeCalendarPrevButton.md#theme-key-RangeCalendarPrevButton-root) / [RangeCalendarNextButton.root](/v3/reference/theming/keys/RangeCalendarNextButton.md#theme-key-RangeCalendarNextButton-root) pair on the range side stays split. Whether the two sides should converge on one shape is unsettled.

Default classes:

`size-7 bg-transparent p-0 opacity-50 hover:opacity-100`

Composes: `_ButtonBase.root` `_ButtonOutline.root`

Source: `client/lib/theme/vueda-tailwind/controls/CalendarNavButton.theme.js:21`