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
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| iconOverride | 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. | |
| themeOverride | Object | null | A partial ThemeObject keyed by component name, merged over this component's theme and provided to descendants. | |
| tone | string | "info" | Visual severity of the message. Drives the icon-tile tint. | |
| iconName | string | undefined | Icon registry key rendered inside the tone-tinted crest tile. | |
| iconProps | object | undefined | Extra props merged onto the resolved crest icon component. | |
| class | 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 |
Source
client/lib/display/system-message/SystemMessageCard.vue