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

# ErrorDisplay

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

> Full-width error block wrapper for message, code, and links.

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/ErrorDisplay.md#theme-key-ErrorDisplay-root) | `w-full` | Full-width error block wrapper for message, code, and links. |
| [container](/v3/reference/theming/keys/ErrorDisplay.md#theme-key-ErrorDisplay-container) | `max-w-full overflow-x-auto p-1 2xs:p-2 2xl:p-4 flex flex-col gap-2` | Scroll-safe column container for long diagnostic text. |
| [message](/v3/reference/theming/keys/ErrorDisplay.md#theme-key-ErrorDisplay-message) |  | Primary error message area; inherits typography from the surrounding surface. |
| [codeBlock](/v3/reference/theming/keys/ErrorDisplay.md#theme-key-ErrorDisplay-codeBlock) | `bg-neutral-100 dark:bg-neutral-800 p-1 2xs:p-2 2xl:p-4 rounded` | Code block surface for stack traces or machine diagnostics. |
| [link](/v3/reference/theming/keys/ErrorDisplay.md#theme-key-ErrorDisplay-link) | `underline` | Underlined recovery or detail link inside the error message. |

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

## root

> Full-width error block wrapper for message, code, and links.

Default classes:

`w-full`

Source: `client/lib/theme/vueda-tailwind/display/ErrorDisplay.theme.js:16`

<a id="theme-key-ErrorDisplay-container"></a>

## container

> Scroll-safe column container for long diagnostic text.

Default classes:

`max-w-full overflow-x-auto p-1 2xs:p-2 2xl:p-4 flex flex-col gap-2`

Source: `client/lib/theme/vueda-tailwind/display/ErrorDisplay.theme.js:20`

<a id="theme-key-ErrorDisplay-message"></a>

## message

> Primary error message area; inherits typography from the surrounding surface.

Source: `client/lib/theme/vueda-tailwind/display/ErrorDisplay.theme.js:24`

<a id="theme-key-ErrorDisplay-codeBlock"></a>

## codeBlock

> Code block surface for stack traces or machine diagnostics.

Default classes:

`bg-neutral-100 dark:bg-neutral-800 p-1 2xs:p-2 2xl:p-4 rounded`

Source: `client/lib/theme/vueda-tailwind/display/ErrorDisplay.theme.js:28`

<a id="theme-key-ErrorDisplay-link"></a>

## link

> Underlined recovery or detail link inside the error message.

Default classes:

`underline`

Source: `client/lib/theme/vueda-tailwind/display/ErrorDisplay.theme.js:32`