Components

Message

Messages are how we display user generated content provided by our network partners in app.

2 mins ago
Come in today and find last minute gifts for every coffee lover on your list. ๐ŸŽ
Nathan Sanders
by Nate Sanders
import { Message } from '@sproutsocial/racine'

Properties

System props

System props apply standard sets of properties to a component that can be used to alter its appearance on the fly.

COMMON
BORDER
LAYOUT
FLEXBOX
Learn more
NameTypeDefaultDescriptionRequired?
densityMESSAGE_DENSITIES"small"
Compact, small, or large.
childrenunion
innerRef"div"
borderColorstring"border"
bgstring"neutral.0"
indentContentbooleantrue
qaObject

Density

The density prop allows us to render three different sizes of Message.

  • Compact
  • Small
  • Large

In most message streams, density is a user controlled toggle.

Subcomponents

All messages are composed from at least one of three subcomponents. In most cases, using all three subcomponents will be necessary. However, use cases may vary and not all subcomponents are required to create a message.

Message.Header contains message infomation like message type, profile, and timestamp. The right side of Message.Header is always reserved for bulk controls when available.

Body

Message.Body contains the message content like message text, images, attribution, and metadata.

Message.Footer contains message actions and, in some cases, stats when available.

Recipes

Editorial message with stats

  • Only uses 2 subcomponents Message.Body and Message.Footer
  • Demonstrates interesting Message.Body content variation
  • Uses left half of Message.Footer for stats
The entryway at Sprout Social HQ
New York Times ยท 5 days ago11 Emerging Artists Redefining Abstract PaintingA new generation of painters, all 40 years old or younger, are rethinking what we might call, for lack of a better term, abstraction.Read full article
38.3k
20k
20.4k
4k

Retweet with comment

  • Uses a Message inside of a Message
  • Standard, run of the mill usage of Message
2 mins ago
Dang it, Cubs!
Commentary: #cubs have nobody to blame but themselves: http://t.co/SRS5CnQHy1

Note

  • Uses Message in a way that looks totally different
Note
1/10/2020
HeadlineThis is a note with very important information regarding something noteworthy.
NS
by Nate Sanders