PDF Comment Button

"use client";

import { createPluginRegistration } from "@embedpdf/core";

About#

<PdfCommentButton /> is the entry point to commenting. Pressing it arms the annotation plugin's built-in textComment tool; the next click on a page drops a comment pin. Each pin is a PDF Text annotation, which the annotation plugin already draws on-page through <PdfAnnotationLayer> and lists as a thread in <PdfCommentSidebar />.

• Reflects the armed tool — the toggle's pressed state tracks whether textComment is the active tool, so it stays in sync when the tool is armed or disarmed from anywhere else.
• Respects permissions — when the document forbids annotating, the toggle is disabled with a tooltip explaining why, rather than looking armable but doing nothing.

Comment pins are part of the annotation plugin, which is a heavy-tier plugin <PdfViewer /> does not register for you. The plugin and the annotation layer both have to be added before this button does anything — both are shown below.

Installation#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add pdfcn/comment-button
Copy

Usage#

Copyimport { createPluginRegistration } from "@embedpdf/core";
import { AnnotationPluginPackage } from "@embedpdf/plugin-annotation/react";
 
// Outside the component — a new array identity on every render tears the
// engine down and rebuilds it. `annotationAuthor` attributes the pins.
const plugins = [
  createPluginRegistration(AnnotationPluginPackage, {
    annotationAuthor: "You",
  }),
];

Copy<PdfViewer
  documents={[{ url: "/sample.pdf" }]}
  plugins={plugins}
  className="h-[720px]"
>
  <PdfToolbar>
    <PdfCommentButton />
  </PdfToolbar>
  <PdfViewerContent
    pageLayers={({ documentId, pageIndex }) => (
      <PdfAnnotationLayer documentId={documentId} pageIndex={pageIndex} />
    )}
  />
</PdfViewer>

Pair it with <PdfCommentSidebar /> to read and reply to the threads the pins create.

Examples#

Default#

"use client";

import { createPluginRegistration } from "@embedpdf/core";

With a thread on the pin#

A pin on its own is a marker. Give <PdfAnnotationLayer /> a customAnnotationRenderer and a selectionMenu and it becomes a conversation — an avatar marker that opens its thread when picked. See PDF Comment for the pieces.

"use client";

import { createPluginRegistration } from "@embedpdf/core";

Alongside the annotation tools#

The button is an ordinary toggle, so it sits in a toolbar run next to <PdfAnnotationToolbar />. Both read the same active-tool state, so arming one disarms the other:

Copy<PdfToolbar>
  <PdfAnnotationToolbar />
  <PdfToolbarSeparator />
  <PdfCommentButton />
</PdfToolbar>

Accessibility#

The button is shadcn's <Toggle /> — a real <button> with aria-pressed, reachable with Tab and operable with Enter or Space. It carries aria-label="Comment", matching its tooltip, so the label is available whether or not the tooltip is shown.

Pressed state is read from the plugin's active tool rather than tracked from the click, so arming or disarming the tool anywhere else — a keyboard shortcut, another control — is announced here too.

A document that forbids annotating disables the button rather than hiding it, keeping tab order stable, and the tooltip says why instead of leaving a control that looks armable but does nothing.

API Reference#

PdfCommentButton#

A <Toggle /> carrying data-slot="pdf-comment-button", bound to the annotation plugin's active tool. Accepts every <Toggle /> prop except pressed and value, which it owns.

Returns null when the document isn't loaded or the annotation plugin isn't registered. It disables itself when the active document forbids modifying annotations. See Permissions for the full model.