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

# CalendarCellTrigger

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

> The pressable day button inside a [CalendarCell.root](/v3/reference/theming/keys/CalendarCell.md#theme-key-CalendarCell-root). Composes [\_ButtonBase.root](/v3/reference/theming/keys/_ButtonBase.md#theme-key-_ButtonBase-root) plus [\_ButtonGhost.root](/v3/reference/theming/keys/_ButtonGhost.md#theme-key-_ButtonGhost-root) so day buttons share the popover-friendly hover recipe with the rest of the picker chrome. Size pins to `--vueda-cal-day` (30×30) so the button sits inside the 32px [CalendarCell.root](/v3/reference/theming/keys/CalendarCell.md#theme-key-CalendarCell-root) with a 1px breathing margin. Carries the picker's full state matrix: `data-selected` paints `--primary` / `--primary-foreground`, `data-today` (when not selected) paints `--accent`, `data-disabled` and `data-outside-view` mute to `--muted-foreground`, and `data-unavailable` paints `--destructive` plus `line-through`.

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/CalendarCellTrigger.md#theme-key-CalendarCellTrigger-root) | 6 classes | The pressable day button inside a [CalendarCell.root](/v3/reference/theming/keys/CalendarCell.md#theme-key-CalendarCell-root). Composes [\_ButtonBase.root](/v3/reference/theming/keys/_ButtonBase.md#theme-key-_ButtonBase-root) plus [\_ButtonGhost.root](/v3/reference/theming/keys/_ButtonGhost.md#theme-key-_ButtonGhost-root) so day buttons share the popover-friendly hover recipe with the rest of the picker chrome. Size pins to `--vueda-cal-day` (30×30) so the button sits inside the 32px [CalendarCell.root](/v3/reference/theming/keys/CalendarCell.md#theme-key-CalendarCell-root) with a 1px breathing margin. Carries the picker's full state matrix: `data-selected` paints `--primary` / `--primary-foreground`, `data-today` (when not selected) paints `--accent`, `data-disabled` and `data-outside-view` mute to `--muted-foreground`, and `data-unavailable` paints `--destructive` plus `line-through`. |

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

## root

> The pressable day button inside a [CalendarCell.root](/v3/reference/theming/keys/CalendarCell.md#theme-key-CalendarCell-root). Composes [\_ButtonBase.root](/v3/reference/theming/keys/_ButtonBase.md#theme-key-_ButtonBase-root) plus [\_ButtonGhost.root](/v3/reference/theming/keys/_ButtonGhost.md#theme-key-_ButtonGhost-root) so day buttons share the popover-friendly hover recipe with the rest of the picker chrome. Size pins to `--vueda-cal-day` (30×30) so the button sits inside the 32px [CalendarCell.root](/v3/reference/theming/keys/CalendarCell.md#theme-key-CalendarCell-root) with a 1px breathing margin. Carries the picker's full state matrix: `data-selected` paints `--primary` / `--primary-foreground`, `data-today` (when not selected) paints `--accent`, `data-disabled` and `data-outside-view` mute to `--muted-foreground`, and `data-unavailable` paints `--destructive` plus `line-through`.

Default classes:

```text
size-[var(--vueda-cal-day)] p-0 font-normal aria-selected:opacity-100 cursor-default
[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground
data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground
data-[disabled]:text-muted-foreground data-[disabled]:opacity-50
data-[unavailable]:text-destructive data-[unavailable]:line-through
data-[outside-view]:text-muted-foreground
```

Composes: `_ButtonBase.root` `_ButtonGhost.root`

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