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

# FileDisplay

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

> Wrapper around the link; unstyled so it inherits the row's text rhythm.

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/FileDisplay.md#theme-key-FileDisplay-root) |  | Wrapper around the link; unstyled so it inherits the row's text rhythm. |
| [link](/v3/reference/theming/keys/FileDisplay.md#theme-key-FileDisplay-link) | `text-primary-text underline-offset-4 hover:underline break-all` | The file link uses the same inline-text recipe as [\_ButtonLink](/v3/reference/theming/keys/_ButtonLink.md): `--primary-text` with an underline on hover. `break-all` stops a long file name from widening the row. |
| [name](/v3/reference/theming/keys/FileDisplay.md#theme-key-FileDisplay-name) | `break-all` | A file name that has no URL to link to, shown as plain text. |
| [dash](/v3/reference/theming/keys/FileDisplay.md#theme-key-FileDisplay-dash) |  | Empty-value dash slot, matching DateTimeDisplay so the two read the same. |

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

## root

> Wrapper around the link; unstyled so it inherits the row's text rhythm.

Default classes:

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

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

## link

> The file link uses the same inline-text recipe as [\_ButtonLink](/v3/reference/theming/keys/_ButtonLink.md): `--primary-text`
with an underline on hover. `break-all` stops a long file name from widening the row.

Default classes:

`text-primary-text underline-offset-4 hover:underline break-all`

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

<a id="theme-key-FileDisplay-name"></a>

## name

> A file name that has no URL to link to, shown as plain text.

Default classes:

`break-all`

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

<a id="theme-key-FileDisplay-dash"></a>

## dash

> Empty-value dash slot, matching DateTimeDisplay so the two read the same.

Default classes:

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