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

# _ButtonGhost

_Composition primitive, consumed by leaf keys via `composes`._

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

> The transparent-at-rest recipe: no fill or edge until hover, when `--accent` paints the background, with an `--accent-active` pressed step (dark mode: half-strength `accent/50` hover, full `accent` active). Shared by [CalendarCellTrigger.root](/v3/reference/theming/keys/CalendarCellTrigger.md#theme-key-CalendarCellTrigger-root) and [RangeCalendarCellTrigger.root](/v3/reference/theming/keys/RangeCalendarCellTrigger.md#theme-key-RangeCalendarCellTrigger-root) so day buttons in a calendar grid keep one consistent hover and press affordance; dark-mode hover is half-strength accent so the day button does not over-saturate the popover surface.

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/_ButtonGhost.md#theme-key-_ButtonGhost-root) | 3 classes | The transparent-at-rest recipe: no fill or edge until hover, when `--accent` paints the background, with an `--accent-active` pressed step (dark mode: half-strength `accent/50` hover, full `accent` active). Shared by [CalendarCellTrigger.root](/v3/reference/theming/keys/CalendarCellTrigger.md#theme-key-CalendarCellTrigger-root) and [RangeCalendarCellTrigger.root](/v3/reference/theming/keys/RangeCalendarCellTrigger.md#theme-key-RangeCalendarCellTrigger-root) so day buttons in a calendar grid keep one consistent hover and press affordance; dark-mode hover is half-strength accent so the day button does not over-saturate the popover surface. |

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

## root

> The transparent-at-rest recipe: no fill or edge until hover, when `--accent` paints the background, with an `--accent-active` pressed step (dark mode: half-strength `accent/50` hover, full `accent` active). Shared by [CalendarCellTrigger.root](/v3/reference/theming/keys/CalendarCellTrigger.md#theme-key-CalendarCellTrigger-root) and [RangeCalendarCellTrigger.root](/v3/reference/theming/keys/RangeCalendarCellTrigger.md#theme-key-RangeCalendarCellTrigger-root) so day buttons in a calendar grid keep one consistent hover and press affordance; dark-mode hover is half-strength accent so the day button does not over-saturate the popover surface.

Default classes:

```text
hover:bg-accent hover:text-accent-foreground active:bg-accent-active
dark:hover:bg-accent/50 dark:active:bg-accent
disabled:text-disabled-foreground
```

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