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

NameTypeDefaultDescriptionRequired?
density
MESSAGE_DENSITIES
"small"
Condensed, small, or large.
children
React.Element<any> | null
innerRef
"div"
borderColorstring"border"
bgstring"neutral.0"
indentContentbooleantrue
qaObject

Subcomponents

Message subcomponents are variations of existing components that have been customized for use within a message. Using these subcomponents will ensure your messages adhere to Seeds’ design standards.

Message.Header leverages . It contains elements like message type, timestamp, and profile information.

You will notice that by default, message headers use a flex layout with justify-content set to space-between. Reserve the right most section of a message header for bulk actions when available.

Avatar

Message.Avatar makes use of and resizes based on the message’s density.

Body

Message.Body is a . It contains message content like message text, images, attribution, and metadata.

Message.Footer leverages . It contains message actions and in some cases data. It’s worth noting that by default, message footers use a flex layout with justify-content set to space-between.

Meta

Message.Meta contains ancillary information about a message. Meta information should be limited to a short, single line of text.

Recipes

Message density

We can render three different sizes of a message using . In most message streams, density should be configurable by the user.

Complexity is a tax on everything we do. We strive to make our products, our processes, our policies and our operations as free from complexity as possible, allowing us the agility to grow, adapt and thrive. In our products, complexity is a tax on our customers, and we seek elegant solutions that enhance their work.
A brief little message about a message!

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 Message inside of 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

Note
1/10/2020
HeadlineThis is a note with very important information regarding something noteworthy.
NS
by Nate Sanders