Chat box The Chat box component offers the possibility of creating messaging systems for your web application.

Inline

Chat boxes can be created directly in the main content area or they can be wrapped inside other elements like content boxes, popovers, dialogs, dropdowns, etc. Each chat line can have multiple buttons, colors, title, etc.

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
    a few seconds ago
  • Horia Simon

    This comment line has a title (author name) and a right button panel.
    a few seconds ago
  • This comment line has a bottom button panel, box shadow and title.
    a few seconds ago
    Reply

Chat inside content box

You can wrap the chat elements inside a custom scrollbar content box or in a regular content box like our left example below.

Chat box

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
    a few seconds ago
  • Horia Simon

    This comment line has a title (author name) and a right button panel.
    a few seconds ago
  • This comment line has a bottom button panel, box shadow and title.
    a few seconds ago
    Reply
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
    a few seconds ago
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
    a few seconds ago

Chat box

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
    a few seconds ago
  • Horia Simon

    This comment line has a title (author name) and a right button panel.
    a few seconds ago
  • This comment line has a bottom button panel, box shadow and title.
    a few seconds ago
    Reply
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
    a few seconds ago
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
    a few seconds ago