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

# RangeCalendarPrevButton

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

> The previous-month button anchored to the left edge of a [RangeCalendarHeader.root](/v3/reference/theming/keys/RangeCalendarHeader.md#theme-key-RangeCalendarHeader-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), then absolute-positions itself at `left-1` so the button does not consume row flex while the heading floats centred between the two edges. Same square 28×28 transparent plus 50%-opacity-at-rest treatment as [CalendarNavButton.root](/v3/reference/theming/keys/CalendarNavButton.md#theme-key-CalendarNavButton-root).

Vue component: [RangeCalendarPrevButton](/v3/reference/api/vue/RangeCalendarPrevButton.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/RangeCalendarPrevButton.md#theme-key-RangeCalendarPrevButton-root) | `absolute left-1 size-7 bg-transparent p-0 opacity-50 hover:opacity-100` | The previous-month button anchored to the left edge of a [RangeCalendarHeader.root](/v3/reference/theming/keys/RangeCalendarHeader.md#theme-key-RangeCalendarHeader-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), then absolute-positions itself at `left-1` so the button does not consume row flex while the heading floats centred between the two edges. Same square 28×28 transparent plus 50%-opacity-at-rest treatment as [CalendarNavButton.root](/v3/reference/theming/keys/CalendarNavButton.md#theme-key-CalendarNavButton-root). |

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

## root

> The previous-month button anchored to the left edge of a [RangeCalendarHeader.root](/v3/reference/theming/keys/RangeCalendarHeader.md#theme-key-RangeCalendarHeader-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), then absolute-positions itself at `left-1` so the button does not consume row flex while the heading floats centred between the two edges. Same square 28×28 transparent plus 50%-opacity-at-rest treatment as [CalendarNavButton.root](/v3/reference/theming/keys/CalendarNavButton.md#theme-key-CalendarNavButton-root).

Default classes:

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

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

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