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

# ViewDestroy

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

> Outer wrapper. Empty; the embedded [ModelActionForm](/v3/reference/theming/keys/ModelActionForm.md) renders the page in its danger tone: the sticky action bar, the gutter, and the selected-records panel.

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/ViewDestroy.md#theme-key-ViewDestroy-root) |  | Outer wrapper. Empty; the embedded [ModelActionForm](/v3/reference/theming/keys/ModelActionForm.md) renders the page in its danger tone: the sticky action bar, the gutter, and the selected-records panel. |
| [banner](/v3/reference/theming/keys/ViewDestroy.md#theme-key-ViewDestroy-banner) | `flex items-start gap-3` | Unframed banner row at the top of the page body: the destructive icon tile beside the title and the description or cascade list. Matches [ModelActionForm.banner](/v3/reference/theming/keys/ModelActionForm.md#theme-key-ModelActionForm-banner) on a page. |
| [bannerIcon](/v3/reference/theming/keys/ViewDestroy.md#theme-key-ViewDestroy-bannerIcon) | `bg-destructive text-destructive-foreground` | 36 px destructive icon tile leading the banner. Fixed destructive recipe (no tone routing) since ViewDestroy is the danger specialization; matches [ModelActionForm.bannerIcon](/v3/reference/theming/keys/ModelActionForm.md#theme-key-ModelActionForm-bannerIcon) under the danger tone. |
| [bannerBody](/v3/reference/theming/keys/ViewDestroy.md#theme-key-ViewDestroy-bannerBody) |  | Inner column beside the icon: title above description. `min-w-0` lets long titles ellipsize instead of pushing the banner wider. |
| [bannerTitle](/v3/reference/theming/keys/ViewDestroy.md#theme-key-ViewDestroy-bannerTitle) |  | Banner title. 14 px / 600 / foreground; the destructive action's "what is about to happen" headline. |
| [bannerDescription](/v3/reference/theming/keys/ViewDestroy.md#theme-key-ViewDestroy-bannerDescription) |  | One-line description beneath the title (typically the `ConsequencesBullets` fallback or its leading sentence). 12 px / muted-foreground per the headline / supporting-copy hierarchy. |

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

## root

> Outer wrapper. Empty; the embedded [ModelActionForm](/v3/reference/theming/keys/ModelActionForm.md) renders the page in its danger tone: the sticky action bar, the gutter, and the selected-records panel.

Source: `client/lib/theme/vueda-tailwind/views/ViewDestroy.theme.js:18`

<a id="theme-key-ViewDestroy-banner"></a>

## banner

> Unframed banner row at the top of the page body: the destructive icon tile beside the title and the description or cascade list. Matches [ModelActionForm.banner](/v3/reference/theming/keys/ModelActionForm.md#theme-key-ModelActionForm-banner) on a page.

Default classes:

`flex items-start gap-3`

Source: `client/lib/theme/vueda-tailwind/views/ViewDestroy.theme.js:22`

<a id="theme-key-ViewDestroy-bannerIcon"></a>

## bannerIcon

> 36 px destructive icon tile leading the banner. Fixed destructive recipe (no tone routing) since ViewDestroy is the danger specialization; matches [ModelActionForm.bannerIcon](/v3/reference/theming/keys/ModelActionForm.md#theme-key-ModelActionForm-bannerIcon) under the danger tone.

Default classes:

`bg-destructive text-destructive-foreground`

Composes: `_ActionBanner.bannerIcon`

Source: `client/lib/theme/vueda-tailwind/views/ViewDestroy.theme.js:26`

<a id="theme-key-ViewDestroy-bannerBody"></a>

## bannerBody

> Inner column beside the icon: title above description. `min-w-0` lets long titles ellipsize instead of pushing the banner wider.

Composes: `_ActionBanner.bannerBody`

Source: `client/lib/theme/vueda-tailwind/views/ViewDestroy.theme.js:31`

<a id="theme-key-ViewDestroy-bannerTitle"></a>

## bannerTitle

> Banner title. 14 px / 600 / foreground; the destructive action's "what is about to happen" headline.

Composes: `_ActionBanner.bannerTitle`

Source: `client/lib/theme/vueda-tailwind/views/ViewDestroy.theme.js:36`

<a id="theme-key-ViewDestroy-bannerDescription"></a>

## bannerDescription

> One-line description beneath the title (typically the `ConsequencesBullets` fallback or its leading sentence). 12 px / muted-foreground per the headline / supporting-copy hierarchy.

Composes: `_ActionBanner.bannerDesc`

Source: `client/lib/theme/vueda-tailwind/views/ViewDestroy.theme.js:41`