Message

One message with its author and time.

Left out of Multi-brand Multi-brand draws on core, content and media families, not conversation. It admits only families in its roles. Its only messages go to support through a textarea. Use instead: Textarea

See it live

Start Storybook to see it live: npm run storybook

Live from StorybookOpen Message in StorybookSee it in dark

When to use it

• Use it when: Conversations, comments and activity feeds.
• Not when: Status about the system (alert or toast).

Instead:

• Bubble: A chat bubble.
• Alert: A system message.

Words

• Shared structure: object, state, next step.
• Brand tone lives in headlines and marketing copy, not in errors.
• Errors and confirmations read the same in every brand.
• Use: Get started, Plan, Order. Avoid: Brand-specific words in errors, Jargon.

The labels components use, from the voice tokens:

• content.action.commit: Save
• content.action.cancel: Cancel
• content.action.destroy: Remove
• content.action.retry: Try again
• content.action.empty-action: Get started

See Voice and tone for the whole voice.

Use it in code

npx open-ds add message

The component reads only component keys and semantic tokens, so it follows the brand and mode on <html>.

Tokens it reads

Message reads 7 tokens of its own, each an alias of a semantic token. Each row is one part: its own token, the semantic it aliases, and the value it ends at. Change a semantic and every component that reads it follows; override one of Message's tokens to change Message alone.

Changes with theme

Multi-brand decides what changes when you switch theme. Here a switch changes colors, type and shape, so the marked rows differ between its brands and between light and dark; everything else holds steady.

Part	Its token and the semantic it aliases	Value
Message
Gap	component.message.gapcomponent-spacing-map.x3var(--message-gap)	space.20:1.25rem
Text size	component.message.font-sizetype.body.font-sizevar(--message-font-size)	font.size.16:1rem
Gap 2	component.message.gap-2space.gap.tightvar(--message-gap-2)	space.8:0.5rem
Gap x	component.message.gap-xspace.gap.defaultvar(--message-gap-x)	space.12:0.75rem
Author
Weight	component.message.author.font-weighttype.label.font-weightvar(--message-author-font-weight)	font.weight.600:600
Time
Text size	component.message.time.font-sizetype.caption.font-sizevar(--message-time-font-size)	font.size.13:0.8125rem
Text Changes with theme	component.message.time.labelcolor.text.mutedvar(--message-time-label)	Aster Lightslate-deep.light.600:#4B5A6FAster Darkslate-deep.dark.400:#96A3B5Birch Lightslate-deep.light.600:#4B5A6FBirch Darkslate-deep.dark.400:#96A3B5Coral Lightslate-deep.light.600:#4B5A6FCoral Darkslate-deep.dark.400:#96A3B5