---
url: "https://vueda.dev/v3/reference/api/vue/SystemMessageCard.md"
title: "SystemMessageCard"
---

# SystemMessageCard

## Overview

Centered card chassis for system-level messages: 404, action-not-found,
loading, and deactivate confirmation. Provides a tone-tracked 36 px crest
icon tile above a border separator, with a meta column (eyebrow + kind
label), an optional trailing status code, a default body slot, and an
optional actions footer.

Tone drives icon-tile background and ink color via the
`group/system-message-card` named scope; the optional `iconName` prop
resolves the visible crest icon through the icon registry.

Theme entry: [SystemMessageCard](/v3/reference/theming/keys/SystemMessageCard.md)

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| <span id="prop-iconOverride">iconOverride</span> | `Object` |  | `null` | A partial icon registry (`{ [componentName]: { [iconName]: { component, props } } }`) merged with inherited and default icon entries; scopes icon overrides to this component and its descendants. |
| <span id="prop-themeOverride">themeOverride</span> | `Object` |  | `null` | A partial ThemeObject keyed by component name, merged over this component's theme and provided to descendants. |
| <span id="prop-tone">tone</span> | `string` |  | `"info"` | Visual severity of the message. Drives the icon-tile tint. |
| <span id="prop-iconName">iconName</span> | `string` |  | `undefined` | Icon registry key rendered inside the tone-tinted crest tile. |
| <span id="prop-iconProps">iconProps</span> | `object` |  | `undefined` | Extra props merged onto the resolved crest icon component. |
| <span id="prop-class">class</span> | `import('vue').HTMLAttributes['class']` |  | `undefined` | Additional CSS classes applied to the card root. |

## Slots

| Name | Scoped | Description |
| --- | --- | --- |
| `crest-eyebrow` |  | crest-eyebrow Uppercase eyebrow label above the kind text. |
| `crest-kind` |  | crest-kind Mono route path, action name, or object kind. |
| `crest-code` |  | crest-code Optional trailing status code (e.g. "404"). Mono 36 px / 600 / tabular-nums. |
| `default` |  |  |
| `actions` |  |  |

[Full slot reference](/v3/reference/api/vue/SystemMessageCard/slots.md)

## Source

`client/lib/display/system-message/SystemMessageCard.vue`