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

# LinkModelView

## Overview

Renders a VUEDA Button control that navigates to a named model view (such as read, update, or a
custom action) for a given app, model, and optional pk. Renders as a link by default, or as
a standard button when the `button` prop is set.

Styling resolves in two modes. In action styling mode (any of `primary`, `tone`, or
`emphasis` is set) the button's look comes from the two-layer action mapping (see
`utils/actionVariant.js`): the action's intrinsic tone (a delete/destroy action is destructive)
crossed with the placement emphasis (`emphasis`, or `fill` when `primary`). Otherwise it renders
as the plain navigation affordance: primary fill for `button`, primary link for anchor links.

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| <span id="prop-app">app</span> | `string` | yes |  | Django app label that owns the model. |
| <span id="prop-model">model</span> | `string` | yes |  | Django model name used to build the target route. |
| <span id="prop-pk">pk</span> | `string\|number\|array` |  | `undefined` | Primary key of the model instance to navigate to. |
| <span id="prop-view">view</span> | `string\|array\|object` |  | `"read"` | Named view (or view descriptor) to navigate to, such as `"read"` or `"update"`. |
| <span id="prop-label">label</span> | `string` |  | `undefined` | Button label text; omit when using an icon-only button. |
| <span id="prop-button">button</span> | `boolean` |  | `false` | When true, renders as a standard button instead of a link-styled button. |
| <span id="prop-disabled">disabled</span> | `boolean` |  | `false` | When true, disables the button and prevents navigation. |
| <span id="prop-primary">primary</span> | `boolean` |  | `false` | When true, promotes this action to the filled hero CTA for its view. |
| <span id="prop-tone">tone</span> | `string` |  | `undefined` | Explicit tone override (the color axis); wins over the action's intrinsic tone. |
| <span id="prop-emphasis">emphasis</span> | `string` |  | `undefined` | Placement emphasis when not promoted; setting it switches the button into action styling mode. |

## Slots

### `default` {#slot-default}

Slot.

## Source

`client/lib/navigation/link-model-view/LinkModelView.vue`