Chat Message Attachment
<zn-chat-message-attachment> | ZnChatMessageAttachment
A single file or link attachment for a zn-chat-message. Renders an icon and a label as a link,
styled to match the message’s attachments row. It is intended to be used only inside a
zn-chat-message and is automatically placed in that component’s attachments slot.
zn-chat-message-attachment represents a single file or link beneath a message. It is intended
to be used only inside a zn-chat-message — it
automatically assigns itself to that component’s attachments slot, so you can drop it straight
into the message.
<zn-chat-message sender="Agent Name" time="1718193420"> Here are the documents you requested. <zn-chat-message-attachment href="#" name="invoice.pdf"></zn-chat-message-attachment> <zn-chat-message-attachment href="#" name="statement.pdf"></zn-chat-message-attachment> </zn-chat-message>
Examples
Custom Icon
Use the icon attribute to change the leading icon (any zn-icon name).
<zn-chat-message sender="Agent Name" time="1718193420"> A couple of links for you. <zn-chat-message-attachment href="#" name="View dashboard" icon="link"></zn-chat-message-attachment> <zn-chat-message-attachment href="#" name="screenshot.png" icon="image"></zn-chat-message-attachment> </zn-chat-message>
Download
Set download to prompt a download rather than navigating to the link.
<zn-chat-message sender="Agent Name" time="1718193420"> Your export is ready. <zn-chat-message-attachment href="#" name="export.csv" download></zn-chat-message-attachment> </zn-chat-message>
Custom Label
The default slot overrides the name attribute when you need richer label content.
<zn-chat-message sender="Agent Name" time="1718193420"> See attached. <zn-chat-message-attachment href="#">contract_<strong>final</strong>.pdf</zn-chat-message-attachment> </zn-chat-message>
Importing
If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.
To import this component from the CDN using a script tag:
<script type="module" src="https://cdn.jsdelivr.net/npm/@kubex/zinc@1.1.15/dist/components/chat-message-attachment/chat-message-attachment.js"></script>
To import this component from the CDN using a JavaScript import:
import 'https://cdn.jsdelivr.net/npm/@kubex/zinc@1.1.15/dist/components/chat-message-attachment/chat-message-attachment.js';
To import this component using a bundler:
import '@kubex/zinc/dist/components/chat-message-attachment/chat-message-attachment.js';
Slots
| Name | Description |
|---|---|
| (default) | The attachment label. Falls back to the name attribute when empty. |
Learn more about using slots.
Properties
| Name | Description | Reflects | Type | Default |
|---|---|---|---|---|
href
|
The URL the attachment links to. |
string
|
''
|
|
name
|
The attachment label (e.g. the file name). Used when the default slot is empty. |
string
|
''
|
|
icon
|
The leading icon name. |
string
|
'attach_file'
|
|
target
|
Where to open the link. Defaults to a new tab. |
string
|
'_blank'
|
|
download
|
Prompt a download rather than navigating to the link. |
boolean
|
false
|
|
updateComplete |
A read-only promise that resolves when the component has finished updating. |
Learn more about attributes and properties.
Parts
| Name | Description |
|---|---|
base |
The attachment link. |
icon |
The leading icon. |
label |
The attachment label. |
Learn more about customizing CSS parts.
Dependencies
This component automatically imports the following dependencies.
<zn-example><zn-icon>