Message Text Patterns

Highlight

Default

import React from 'react'

import { Highlight, Body } from 'playbook-ui'

const HighlightDefault = (props) => (
  <div>
    <Highlight
        highlightedText={['highlight kit']}
        text="This is the Highlight Kit."
    />
    <br />
    <Body>
      {' '}
      {'Hello this is a'}
      {' '}
      <Highlight text=" highlight wrapped."/>
    </Body>
    <br />
    <Body
        highlightedText={['highlighted', 'Body Kit ']}
        highlighting
        text="This is text highlighted in the Body Kit using the text prop."
    />
  </div>
)

export default HighlightDefault

Message

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

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

Github

Connect Chat