Link copied to clipboard!
Mobile navigation button - closed state

Selection Comments

Select some text and leave a comment


⚠️ This component is still in beta. It might not behave as expected, and its API might change.

When to use

Wrapping parts of your HTML with Selection Comments enables leaving comments after selecting text, just like in Notion. This component also renders all the existing comments on a page.

When users select text in an HTML element nested inside Selection Comments, a customisable “Comment” button will appear. Clicking on it will render a floating composer, allowing users to leave a comment. You can retrieve and reply to an existing comment by clicking on the pins on the page.



This component pairs well with:


How to Use

  • import { beta } from "@cord-sdk/react";
    
    export const Example = () => {
      return (
        <beta.SelectionComments location={{ "page": "index" }} >
          <p>Try selecting this text!</p>
        </beta.SelectionComments>
      );
    };
    
    
  • <body>
      <div id="header">
        <cord-selection-comments location='{{ "page": "index" }}'>
          <p>Try selecting this text</p>
        </cord-selection-comments>
      </div>
    </body>
    

Properties

Attributes & Events

location
optionaldefault: current URL

The location determines which comments will be rendered on a page, and the location of new comments added to the page.

buttonLabel
optionaldefault: Add comment

The text label on the button. If set to an empty string, the button will not have a label.

iconUrl
optionaldefault: Comment icon

If provided, changes the URL of the icon. If set to an empty string, the button will get the default comment icon.

location
optionaldefault: current URL

The location determines which comments will be rendered on a page, and the location of new comments added to the page.

button-label
optionaldefault: Add comment

The text label on the button. If set to an empty string, the button will not have a label.

icon-url
optionaldefault: Comment icon

If provided, changes the URL of the icon. If set to an empty string, the button will get the default comment icon.


CSS Variables

These can be used to customize the component. You can learn more about customization here.

Name Default Value
--cord-selection-comments-font-size 14px
--cord-selection-comments-line-height 20px
--cord-selection-comments-letter-spacing normal
--cord-selection-comments-text-color --cord-secondary-button-content-color
##121314
--cord-selection-comments-background-color --cord-secondary-button-background-color
#F6F6F6

Next up