Message

This multi kit consists of a an avatar, a status, a caption, a body text, and a time stamp, all of which are optional.

Default

Use this kit when displaying a message or a sort of communication with either a user or a bot. Use it in history displays, chat rooms, discussion threads or comments section.

import React from "react"

import { Message, Image } from 'playbook-ui'

const MessageDefault = (props) => {
  return (
    <div>
      <Message
          avatarName='Mike Bishop'
          avatarStatus='online'
          avatarUrl='https://randomuser.me/api/portraits/men/50.jpg'
          borderRadius='rounded'
          label='Anna Black'
          message='How can we assist you today?'
          timestamp='20 seconds ago'
      />

      <br />
      <br />
      <br />
      <br />

      <Message
          avatarName='Becca Jacobs'
          avatarUrl='https://randomuser.me/api/portraits/women/50.jpg'
          label='Lucille Sanchez'
          message='Application for Kate Smith is waiting for your approval'
          timestamp='2 days ago'
      />

      <br />
      <br />

      <Message
          avatarName='Timothy Wenhold'
          label='Beverly Reyes'
          message='We are so sorry you had a bad experience!'
          timestamp='2 days ago'
      />

      <br />
      <br />

      <Message
          label='Keith Craig'
          message='Please hold for one moment, I will check with my manager.'
          timestamp='2 days ago'
      />

      <br />
      <br />

      <Message label='Keith Craig'
          timestamp='2 days ago'
      >
        <Image
            alt='picture of a misty forest'
            size='md'
            url='https://unsplash.it/500/400/?image=634'
        />
      </Message>

      <br />
      <br />

      <Message
          label='Keith Craig'
          message='Please hold for one moment, I will check with my manager.'
          timestamp='2 days ago'
      >
        <Image
            alt='picture of a misty forest'
            size='md'
            url='https://unsplash.it/500/400/?image=634'
        />
      </Message>
    </div>
  )
}

export default MessageDefault

With Timestamp Hover

import React from 'react'

import { Message } from 'playbook-ui'

const MessageTimestamp = (props) => {
  return (
    <>
      <Message
          avatarName="Wade Winningham"
          avatarUrl="https://randomuser.me/api/portraits/men/14.jpg"
          label="Anna Black"
          message="We will escalate this issue to a Senior Support agent."
          timestamp="9 minutes ago"
          timestampObject={new Date}
      />
      <br />
      <br />
      <Message
          alignTimestamp="left"
          avatarName="Wade Winningham"
          avatarUrl="https://randomuser.me/api/portraits/men/14.jpg"
          label="Becca Jacobs"
          message="Application for Kate Smith is waiting for your approval"
          timestamp="12.20p"
          timestampObject={new Date}
      />
    </>
  )
}

export default MessageTimestamp

Hover

import React from "react"

import { Message } from 'playbook-ui'

const MessageHover = (props) => {
  return (
    <div>
      <Message
          avatarName='Mike Bishop'
          avatarStatus='online'
          avatarUrl='https://randomuser.me/api/portraits/men/50.jpg'
          borderRadius='rounded'
          hover={{ background: "success_subtle" }}
          label='Anna Black'
          message='How can we assist you today?'
          padding="xs"
      />

      <br />
      <br />
      <br />

      <Message
          avatarName='Becca Jacobs'
          avatarUrl='https://randomuser.me/api/portraits/women/50.jpg'
          borderRadius='rounded'
          hover={{ shadow: "deepest" }}
          label='Lucille Sanchez'
          message='Application for Kate Smith is waiting for your approval'
          padding="xs"
      />

      <br />

    </div>
  )
}

export default MessageHover

Mentions

The message kit also supports @mentions using a compound component structure. See the code example for details on how to pass user mentions through your messages.

import React from "react"

import { Message } from 'playbook-ui'

const MessageDefault = (props) => {
    return (
        <>
            <Message
                avatarName='Keith Craig'
                label='Keith Craig'
                paddingBottom="md"
                timestamp='2 days ago'
            >
                <Message.Mention variant='user'>{'@all'}</Message.Mention>{` let's welcome `}
                <Message.Mention variant='self'>{'@Lucille Sanchez'}</Message.Mention>{' to the team this week!'}
            </Message>

            <Message
                avatarName='Lucille Sanchez'
                avatarUrl='https://randomuser.me/api/portraits/women/50.jpg'
                label='Lucille Sanchez'
                timestamp='2 days ago'
            >
                <Message.Mention variant='self'>{'@Keith Craig'}</Message.Mention>{` thanks for the warm welcome! I'm so excited!`}
            </Message>
        </>
    )
}

export default MessageDefault

Grayscale Avatar

import React from "react"

import { Message } from 'playbook-ui'

const MessageGrayscale = (props) => {
  return (
    <Message
        avatarGrayscale
        avatarName='Mike Bishop'
        avatarStatus='offline'
        avatarUrl='https://randomuser.me/api/portraits/men/50.jpg'
        borderRadius='rounded'
        label='Mike Bishop'
        message='So long, and thanks for all the fish!'
        timestamp='3 months ago'
    />
  )
}

export default MessageGrayscale

Things To Avoid

Avoid changing the format of this kit. Keep the layout true to its original design.

Available Props

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Dribbble

Github

Connect Chat