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

import { Message } from '@sproutsocial/racine'
Properties
Name | Type | Default | Description | Required? |
---|---|---|---|---|
density | MESSAGE_DENSITIES | "small" | Condensed, small, or large. | |
children | React.Element<any> | null | |||
innerRef | "div" | |||
borderColor | string | "border" | ||
bg | string | "neutral.0" | ||
indentContent | boolean | true | ||
qa | Object |
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.
Header
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.
Footer
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