Comment

A comment displays discussions and user feedback.

Examples Code Usage Changelog

Installation

Package installation information
Install	`yarn add @atlaskit/comment`
Source	Bitbucket.org, (opens new window)
npm	@atlaskit/comment, (opens new window)
Bundle	unpkg.com, (opens new window)

Props

`actions`
Description	A list of `CommentAction` items rendered as a row of buttons below the content.
Default	`[]`
Type	`React.ReactNode[]`

`afterContent`
Description	Content that is rendered after the comment's content.
Type	`string \| number \| boolean \| React.ReactElement<any, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal`

`author`
Description	A `CommentAuthor` element containing the name of the author.
Type	`string \| number \| boolean \| React.ReactElement<any, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal`

`avatar`
Required
Description	The element to display as the avatar. It's best to use `@atlaskit/avatar`.
Type	`string \| number \| boolean \| React.ReactElement<any, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal`

`children`
Description	Provide nested comments as children.
Type	`string \| number \| boolean \| React.ReactElement<any, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal`

`content`
Description	The main content for the comment.
Type	`string \| number \| boolean \| React.ReactElement<any, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal`

`edited`
Description	A `CommentEdited` element which displays next to the time. Indicates whether the comment has been edited.
Type	`string \| number \| boolean \| React.ReactElement<any, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal`

`errorActions`
Description	A list of `CommentAction` items rendered with a warning icon instead of the actions.
Default	`[]`
Type	`React.ReactNode[]`

`errorIconLabel`
Description	Text to show in the error icon label.
Default	`""`
Type	`string`

`headingLevel`
Description	Use this to set the semantic heading level of the comment. The default comment heading has an `h3` tag. Make sure that headings are in the correct order and don’t skip levels.
Default	`"3"`
Type	`"1" \| "3" \| "2" \| "4" \| "5" \| "6"`

`highlighted`
Description	Sets whether this comment should be highlighted.
Default	`false`
Type	`boolean`

`id`
Description	An ID to be applied to the comment.
Type	`string`

`isError`
Description	Indicates whether the component is in an error state. Hides actions and time.
Default	`false`
Type	`boolean`

`isSaving`
Description	Enables "optimistic saving" mode which removes actions and displays text from the `savingText` prop.
Default	`false`
Type	`boolean`

`restrictedTo`
Description	Text for the "restricted to" label. This will display in the top items, before the main content.
Default	`""`
Type	`string \| number \| boolean \| React.ReactElement<any, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal`

`savingText`
Description	Text to show when in "optimistic saving" mode.
Default	`"Sending..."`
Type	`string`

`shouldHeaderWrap`
Description	Controls if the comment header should wrap.
Type	`boolean`

`shouldRenderNestedCommentsInline`
Description	Controls if nested comments are rendered at the same depth as the parent comment.
Type	`boolean`

`testId`
Description	Optional hook for automated testing.
Type	`string`

`time`
Description	A `CommentTime` element containing the time to display.
Type	`string \| number \| boolean \| React.ReactElement<any, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal`

`type`
Description	The type of comment. This will be rendered in a lozenge at the top of the comment, before the main content.
Type	`string`

Was this page helpful?

We use this feedback to improve our documentation.