Attachment

The attachment chip is a compact pill for a staged file shown in the composer header (cmp-chat-composer__header). It holds an optional image thumbnail, a truncating file name, and a remove control. It is themed through the global --ds-* tokens.

Variations

A document chip shows just the name; an image chip adds a leading __thumb.

syllabus.pdf

×

module-banner.png

×

<span class="cmp-chat-attachment">
  <span class="cmp-chat-attachment__name">syllabus.pdf</span>
  <button
    type="button"
    class="cmp-chat-attachment__remove"
    aria-label="Remove syllabus.pdf"
  >
    <p>×</p>
  </button>
</span>
<span class="cmp-chat-attachment">
  <img class="cmp-chat-attachment__thumb" src="/favicon-150x150.png" alt />
  <span class="cmp-chat-attachment__name">module-banner.png</span>
  <button
    type="button"
    class="cmp-chat-attachment__remove"
    aria-label="Remove module-banner.png"
  >
    <p>×</p>
  </button>
</span>

In the composer header

Chips are placed inside cmp-chat-composer__header, which wraps them above the input.

syllabus.pdf

×

<form class="cmp-chat-composer">
  <div class="cmp-chat-composer__header">
    <span class="cmp-chat-attachment">
      <span class="cmp-chat-attachment__name">syllabus.pdf</span>
      <button
        type="button"
        class="cmp-chat-attachment__remove"
        aria-label="Remove syllabus.pdf"
      >
        <p>×</p>
      </button>
    </span>
  </div>
  <textarea
    class="cmp-chat-composer__input"
    rows="1"
    placeholder="Ask anything..."
    aria-label="Message"
  ></textarea>
</form>

Classes

Class	Element	Purpose
cmp-chat-attachment	span	Rounded chip for a staged attachment.
cmp-chat-attachment__thumb	img	Optional 1.25rem image thumbnail.
cmp-chat-attachment__name	span	Truncating file name.
cmp-chat-attachment__remove	button	Remove control; turns accent on hover/focus.

Accessibility Guidelines

• Give the remove button an aria-label that names the file (for example Remove syllabus.pdf).
• Use an empty alt="" on the thumbnail when the file name already conveys the attachment.

Theming

Uses --ds-border, --ds-surface-muted, --ds-fg, --ds-fg-muted, and --ds-accent. Set data-theme="dark" on an ancestor to theme the chip.