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

# TableRowActions

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

> The inline wrapper for row actions. It stays invisible until the row is hovered, focused within, or selected, keeping scan-heavy tables clear until actions are relevant.

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/TableRowActions.md#theme-key-TableRowActions-root) | 2 classes | The inline wrapper for row actions. It stays invisible until the row is hovered, focused within, or selected, keeping scan-heavy tables clear until actions are relevant. |
| [action](/v3/reference/theming/keys/TableRowActions.md#theme-key-TableRowActions-action) | 4 classes | The canonical action button class exposed to the default slot as `actionClass`. Apply it to small icon buttons so row actions share the same hover surface, border, and focus ring as other table controls. |

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

## root

> The inline wrapper for row actions. It stays invisible until the row is hovered, focused within, or selected, keeping scan-heavy tables clear until actions are relevant.

Default classes:

```text
inline-flex gap-0.5 invisible
[tr:hover_&]:visible [tr:focus-within_&]:visible [tr[data-state=selected]_&]:visible
```

Source: `client/lib/theme/vueda-tailwind/grid/TableRowActions.theme.js:20`

<a id="theme-key-TableRowActions-action"></a>

## action

> The canonical action button class exposed to the default slot as `actionClass`. Apply it to small icon buttons so row actions share the same hover surface, border, and focus ring as other table controls.

Default classes:

```text
inline-flex items-center justify-center size-6 rounded-vueda-control
border border-transparent text-muted-foreground text-[11px]
hover:bg-muted hover:text-foreground hover:border-border active:bg-accent-active
focus-visible:outline-none focus-visible:hairline-ring focus-visible:focus-ring-shadow
```

Source: `client/lib/theme/vueda-tailwind/grid/TableRowActions.theme.js:29`