Comment

Server component, no client JSUnstable

ExamplesCopy Anchor Link

import type { JSX } from 'react';
import { Avatar } from '@nizivo/react/avatar';
import { Comment } from '@nizivo/react/unstable/comment';

export function CommentExample(): JSX.Element {
  return (
    <div style={{ maxInlineSize: 480 }}>
      <Comment
        author="Priya Raman"
        avatar={<Avatar name="Priya Raman" decorative />}
        time={
          <time dateTime="2026-10-28T07:41" title="28 October 2026, 07:41">
            2 h ago
          </time>
        }
        likes={12}
        replyable
        replies={
          <Comment
            author="Jonah Okafor"
            avatar={<Avatar name="Jonah Okafor" decorative />}
            time={
              <time dateTime="2026-10-28T08:05" title="28 October 2026, 08:05">
                1 h ago
              </time>
            }
            likes={3}
            liked
            replyable
          >
            Agreed — I’ll reshoot it this afternoon.
          </Comment>
        }
      >
        Could we try the sage glaze on the hero shot? It reads warmer next to the candles.
      </Comment>
    </div>
  );
}

ImportCopy Anchor Link

import { Comment } from '@nizivo/react/unstable/comment';

// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css
import '@nizivo/react/css/comment.css';

Static or interactiveCopy Anchor Link

Server. No client JavaScript: Like and Reply call onLike and onReply. How to choose.

ContentCopy Anchor Link

author names the writer and avatar takes an Avatar, decorative since the name is printed beside it. time is best a <time> with the full date as its title. likes adds Like, a toggle (liked) named with its count ("Like, 12"); replyable adds Reply. replies holds more Comments, indented under this one. Each comment is an <article>.

PropsCopy Anchor Link

Other exportsCopy Anchor Link

CommentLabels type

import type { CommentLabels } from '@nizivo/react/unstable/comment'

Comment's own strings (§16.4): serialisable, English defaults.

Name	Type	Default	Description
likerequired	string	'Like, {count}'	The Like button's name: {count} is the likes.
replyrequired	string	'Reply'

CommentProps type

import type { CommentProps } from '@nizivo/react/unstable/comment'

The props of Comment, listed above.

Data attributes and slotsCopy Anchor Link

Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.

CSS hooksCopy Anchor Link

Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.

This stylesheet reads no public hook.

Layers: nz.components. Classes: .nz-comment, .nz-comment-action, .nz-comment-action-icon, .nz-comment-action-text, .nz-comment-actions, .nz-comment-author, .nz-comment-avatar, .nz-comment-body, .nz-comment-header, .nz-comment-replies, .nz-comment-time.

AccessibilityCopy Anchor Link

These parts are interactive. Each gets the focus outline and touch-action rule from @nizivo/react/css/base.css (the nz.base layer), so the floor survives a restyle:

• comment-action: draws the focus outline itself on keyboard focus.

KeyboardCopy Anchor Link

To be written.