All components (204)

Comments

Data · Comments · .amset-comments

What it is and when to use it

A comment thread with nested replies: the questions on a product, the notes on an order, the conversation on an incident. Each branch can be collapsed and, with onReply, each comment has its reply button.

When to use it

For public questions and answers on a product page, or internal notes that answer each other.
On each comment, badge to mark the author ("Team", "Author"), photo for their picture and custom for the comments of whoever is viewing; the replies go in answers.
With onReply it can be answered: it receives the comment key and the text, and whoever uses it is the one who adds the reply to comments (with withAnswer, which is exported alongside it). Without onReply, the thread is read-only.
Reply only: a new top-level question has its own TextArea with its button, above or below the thread, because it has its own rules (who can ask, whether signing in is needed).
maxDepth (3 by default) is how deep the indentation goes: deeper replies remain nested for the reader, but are no longer pushed further to the right. empty is what is shown when there are no comments.

When not to

For a back-and-forth chat or ticket, without branches: Conversation.
For reviews with stars: RatingSummary and Rating.
For a record of what has happened: History.

Keyboard: Tab goes through the "Reply" buttons and the ones that collapse each branch; Enter or Space press them. When "Reply" is pressed, the field appears below the comment with focus inside; the send button is disabled while the text is empty, and "Cancel" closes it.

Accessibility: it is a named section (label) and the replies are lists inside lists, so you can hear which comment each one hangs from. Each "Reply" says to whom ("Reply to Marta Ruiz"), the field is called "Your reply to Marta Ruiz" and the collapse button says how many replies it hides ("View 3 replies") with its aria-expanded. The time is relative and carries the exact date in its datetime. The avatars are decorative: the author's name is already written next to them.

Fine-tuning: CSS variables --amset-comments-*: -author, -badge, -bubble, -date, -gap, -indent, -radius, -text. The size changes the gap, the indentation of the replies and the font sizes.

What it looks like

Ada Lovelace25 years ago
Size M fits a little snug.
1. Store25 years ago
  Thanks, we've added it to the guide.

<Comments
  label="Comments"
  comments={[
    { key: '1', author: 'Ada Lovelace', text: 'Size M fits a little snug.', date: 'October 2' },
  ]}
/>

Props

Import it with import { Comments } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`comments`required	`readonly Comment[]`	—
`label`required	`string`	What the thread is about. Required: it names the region.
`className`	`string`	Merged with the library classes; it does not replace them.
`empty`	`string`	—
`maxDepth`	`number`	Up to what level it is indented (3 by default; 0, never). Deeper replies stay nested for the reader, but are no longer pushed further right.
`onReply`	`(key: string, text: string) => void`	Receives the key of the comment being replied to and the text. Without it you cannot reply: the thread is read-only. It only replies: a new top-level comment does not come from here (see the component's JSDoc).
`size`	`"sm" \| "md" \| "lg"`	—

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-comments-gap`	`var(--amset-space-3)`
`--amset-comments-indent`	`var(--amset-space-5)`
`--amset-comments-author`	`var(--amset-text-sm)`
`--amset-comments-date`	`var(--amset-text-xs)`
`--amset-comments-badge`	`var(--amset-text-xs)`
`--amset-comments-text`	`var(--amset-text-base)`
`--amset-comments-bubble`	`var(--amset-space-2) var(--amset-space-3)`
`--amset-comments-radius`	`var(--amset-radius)`

How to change it

.amset-comments {
  --amset-comments-gap: ...;
  --amset-comments-indent: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: