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

# WidgetHtml

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

> The root adds no spacing so form composition controls the editor block.

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/WidgetHtml.md#theme-key-WidgetHtml-root) |  | The root adds no spacing so form composition controls the editor block. |
| [inner](/v3/reference/theming/keys/WidgetHtml.md#theme-key-WidgetHtml-inner) | 4 classes | The inner frame supplies the bordered control surface and clips editor content. Uses the `hairline` edge contract shared with [WidgetJson.root](/v3/reference/theming/keys/WidgetJson.md#theme-key-WidgetJson-root) so the editor frame DPR-tracks like the input-shell controls beside it, with the focus-within ring and `data-[invalid=true]` destructive swap mirroring the other editor widget. |
| [toolbar](/v3/reference/theming/keys/WidgetHtml.md#theme-key-WidgetHtml-toolbar) | 2 classes | The toolbar is a muted, wrapping command strip above the editing area. The bottom divider uses the DPR-keyed `border-b-hairline` width with the structural `--border` colour so the rule tracks the canon hairline scale. |
| [toolbarButton](/v3/reference/theming/keys/WidgetHtml.md#theme-key-WidgetHtml-toolbarButton) | 4 classes | Toolbar buttons use compact slab control styling. |
| [toolbarButtonActive](/v3/reference/theming/keys/WidgetHtml.md#theme-key-WidgetHtml-toolbarButtonActive) | `bg-accent text-accent-foreground` | The active toolbar button uses the same accent surface as selected menu actions. |
| [toolbarSeparator](/v3/reference/theming/keys/WidgetHtml.md#theme-key-WidgetHtml-toolbarSeparator) | `mx-0.5 h-5 w-hairline bg-border` | Separators divide toolbar command groups with a muted vertical rule. |

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

## root

> The root adds no spacing so form composition controls the editor block.

Source: `client/lib/theme/vueda-tailwind/widgets/WidgetHtml.theme.js:17`

<a id="theme-key-WidgetHtml-inner"></a>

## inner

> The inner frame supplies the bordered control surface and clips editor content. Uses the `hairline` edge contract shared with [WidgetJson.root](/v3/reference/theming/keys/WidgetJson.md#theme-key-WidgetJson-root) so the editor frame DPR-tracks like the input-shell controls beside it, with the focus-within ring and `data-[invalid=true]` destructive swap mirroring the other editor widget.

Default classes:

```text
flex flex-col hairline rounded-vueda-control overflow-hidden
transition-shadow
focus-within:hairline-ring focus-within:focus-ring-shadow
data-[invalid=true]:hairline-destructive data-[invalid=true]:focus-within:focus-ring-shadow-destructive
```

Source: `client/lib/theme/vueda-tailwind/widgets/WidgetHtml.theme.js:21`

<a id="theme-key-WidgetHtml-toolbar"></a>

## toolbar

> The toolbar is a muted, wrapping command strip above the editing area. The bottom divider uses the DPR-keyed `border-b-hairline` width with the structural `--border` colour so the rule tracks the canon hairline scale.

Default classes:

```text
flex flex-row flex-wrap items-center gap-0.5
border-b-hairline bg-muted/50 px-1.5 py-1
```

Source: `client/lib/theme/vueda-tailwind/widgets/WidgetHtml.theme.js:30`

<a id="theme-key-WidgetHtml-toolbarButton"></a>

## toolbarButton

> Toolbar buttons use compact slab control styling.

Default classes:

```text
inline-flex items-center justify-center
rounded px-1.5 py-0.5 text-sm font-medium text-muted-foreground
hover:bg-accent hover:text-accent-foreground
active:bg-accent-active active:text-accent-foreground
```

Source: `client/lib/theme/vueda-tailwind/widgets/WidgetHtml.theme.js:34`

<a id="theme-key-WidgetHtml-toolbarButtonActive"></a>

## toolbarButtonActive

> The active toolbar button uses the same accent surface as selected menu actions.

Default classes:

`bg-accent text-accent-foreground`

Source: `client/lib/theme/vueda-tailwind/widgets/WidgetHtml.theme.js:43`

<a id="theme-key-WidgetHtml-toolbarSeparator"></a>

## toolbarSeparator

> Separators divide toolbar command groups with a muted vertical rule.

Default classes:

`mx-0.5 h-5 w-hairline bg-border`

Source: `client/lib/theme/vueda-tailwind/widgets/WidgetHtml.theme.js:47`