Moxi Design System

# Comments

The mx-comment component is used to display a comment or quote, which may be part of a larger conversation.

It provides the following slots:

  • avatar - The avatar of the author. This should ideally be an mx-avatar component.
  • author - The name of the author.
  • date - The date/time of the comment.
  • default - The comment content.

The inverted prop renders the comment with light text on a dark background. This could potentially be used to distinguish between the current user's comments and the comments of others.


  • John Smith Yesterday 5:30PM Hello everyone! 👋
  • That Guy Today 6:53AM Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Feugiat in ante metus dictum at. Tortor posuere ac ut consequat semper. Morbi tristique senectus et netus et malesuada fames ac turpis.
  • You 5 minutes ago Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Feugiat in ante metus dictum at. Tortor posuere ac ut consequat semper. Morbi tristique senectus et netus et malesuada fames ac turpis. 
<ul class="flex flex-col items-stretch gap-30 bg-white p-20">
  <li>
    <mx-comment>
      <mx-avatar slot="avatar" full-name="John Smith" />
      <span slot="author">John Smith</span>
      <span slot="date">Yesterday 5:30PM</span>
      Hello everyone! 👋
    </mx-comment>
  </li>
  <li>
    <mx-comment>
      <mx-avatar slot="avatar" image-url="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50" full-name="That Guy" />
      <span slot="author">That Guy</span>
      <span slot="date">Today 6:53AM</span>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Feugiat in ante metus dictum at. Tortor posuere ac ut consequat semper. Morbi tristique senectus et netus et malesuada fames ac turpis.
    </mx-comment>
  </li>
  <li>
    <mx-comment inverted>
      <mx-avatar slot="avatar" full-name="You" />
      <span slot="author">You</span>
      <span slot="date">5 minutes ago</span>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Feugiat in ante metus dictum at. Tortor posuere ac ut consequat semper. Morbi tristique senectus et netus et malesuada fames ac turpis.
    </mx-comment>
  </li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# mx-comment

# Properties

Property Attribute Description Type Default
inverted inverted Set to true to use light text on a dark background boolean false

If you are having trouble setting a prop or adding an event listener, refer to this page.

← Data Tables →