Components

Message

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

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"background.container"
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.

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

Retweet with comment

  • Uses Message inside of Message
  • Standard, run of the mill usage of Message

Note