Comment
A comment displays discussions and user feedback.
#Default
Use a comment to show one contribution to a discussion.
import { Avatar, Comment } from '@wolf-rayet/react';
<Comment
author="Ava Mensah"
time="2 hours ago"
avatar={<Avatar name="Ava Mensah" size="medium" />}
actions={[{ label: 'Reply' }, { label: 'Edit' }, { label: 'Delete' }]}
>
<p>The customer has tried a new card twice. I have escalated to payments.</p>
</Comment>#Nested
Nest a reply under the comment it answers.
1 hour ago
Any update from payments?
58 minutes ago
Payments replied. The card issuer declined for insufficient funds.
import { Avatar, Comment } from '@wolf-rayet/react';
<Comment
author="Priya Shah"
time="1 hour ago"
avatar={<Avatar name="Priya Shah" size="medium" />}
actions={[{ label: 'Reply' }]}
nested={
<Comment
author="Support bot"
time="58 minutes ago"
avatar={<Avatar name="Support bot" appearance="square" size="medium" />}
actions={[{ label: 'Reply' }]}
>
<p>Payments replied. The card issuer declined for insufficient funds.</p>
</Comment>
}
>
<p>Any update from payments?</p>
</Comment>
The customer has tried a new card twice. I have escalated to payments.