Comment Pin Primitives

Primitive-based components for building custom Comment Pin interfaces with maximum flexibility.

Explore primitives interactively in our Storybook.

Comment Pin primitives can be used standalone: pass annotationId (React) or annotation-id (HTML) to load annotation data directly without a parent root component.

VeltCommentPinNumber

Number badge displayed on the comment pin.

React / Next.js

<VeltCommentPinNumber annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

Other Frameworks

<velt-comment-pin-number annotation-id="abc123"></velt-comment-pin-number>

Attributes: Common attributes only (see Common Inputs section).

---

VeltCommentPinIndex

Index label displayed on the comment pin.

React / Next.js

<VeltCommentPinIndex annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

Other Frameworks

<velt-comment-pin-index annotation-id="abc123"></velt-comment-pin-index>

Attributes: Common attributes only (see Common Inputs section).

---

VeltCommentPinTriangle

Triangle pointer element on the comment pin.

React / Next.js

<VeltCommentPinTriangle annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

Other Frameworks

<velt-comment-pin-triangle annotation-id="abc123"></velt-comment-pin-triangle>

Attributes: Common attributes only (see Common Inputs section).

---

VeltCommentPinPrivateCommentIndicator

Indicator shown on the pin when the comment is private.

React / Next.js

<VeltCommentPinPrivateCommentIndicator annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

Other Frameworks

<velt-comment-pin-private-comment-indicator annotation-id="abc123"></velt-comment-pin-private-comment-indicator>

Attributes: Common attributes only (see Common Inputs section).

---

VeltCommentPinGhostCommentIndicator

Indicator shown on the pin when the comment is a ghost comment.

React / Next.js

<VeltCommentPinGhostCommentIndicator annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

Other Frameworks

<velt-comment-pin-ghost-comment-indicator annotation-id="abc123"></velt-comment-pin-ghost-comment-indicator>

Attributes: Common attributes only (see Common Inputs section).

---

VeltCommentPinUnreadCommentIndicator

Indicator shown on the pin when the comment has unread replies.

React / Next.js

<VeltCommentPinUnreadCommentIndicator annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

Other Frameworks

<velt-comment-pin-unread-comment-indicator annotation-id="abc123"></velt-comment-pin-unread-comment-indicator>

Attributes: Common attributes only (see Common Inputs section).