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

# TriedUrlCallout

## Overview

Small bordered callout surfacing the URL path or action key that the user
attempted, with bad segments tinted destructive. Used in `ViewNotFound` and
`ViewActionNotFound` to ground the suggestion list without explaining the
typo in prose.

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

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| <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-label">label</span> | `string` |  | `"You tried"` | Label column text shown in the 88 px uppercase eyebrow column. Typical values: "You tried", "Action key". |
| <span id="prop-segments">segments</span> | `{ text: string, bad?: boolean }[]` |  | `[]` | Value segments. Each entry renders an inline `<span>`; `bad: true` tints the span with `text-destructive` so it reads as the error signal against the faded non-bad segments. |
| <span id="prop-class">class</span> | `import('vue').HTMLAttributes['class']` |  | `undefined` | Additional CSS classes applied to the root element. |

## Source

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