Message
Allow users to receive essential information, feedback, or status updates related to actions or system states
How to select a suitable type of message:
Choose a Message type (color and icon) based on its associated semantic meaning.
| Type | Color | Icon | Use Case | Best Practice |
|---|---|---|---|---|
| Positive | Green | IconSuccess | Success messages, confirmations, or positive feedback. | Clearly state the successful action or outcome. |
| Neutral | Blue | IconInfoOutline | General information, status updates, or feedback. | Avoid overusing neutral messages. Reserve for situations where no specific sentiment is needed. |
| Warning | Yellow | IconWarningOutline | Potential issues, cautionary alerts, or recommendations for alternative actions. | Provide specific instructions on how to address the warning. |
| Negative | Red | IconError | Error messages, negative feedback, or notifications of unsuccessful actions. | Explain the error clearly and offer guidance for correction. |
Examples
The Message component features a few properties for adjusting its functionality and appearance. The following sections showcase these properties and explain when and how to use them.
Default
This is the default appearance of the Message component. Its type property is by default set to neutral. Make the Message disappear when the situation that caused its appearance has been resolved.
- Use Case: General informational messages or feedback where no specific urgency or sentiment is required.
- Best Practice: Keep the message concise and focused. Use clear and actionable language.
Composition:
- Icon: Visually represents the message type (positive, neutral, warning, negative.).
- Title (Optional): Briefly summarizes the message content (use Message.Title component).
- Message Text: The main content of the message.
- Footer (Optional): Contains links or buttons for user actions (use Message.Footer component).
<Message>
<Paragraph>This is a default message.</Paragraph>
</Message>Types
Use the type property to change the color of and icon of a Message. Every color and icon combination has a specific semantic meaning or purpose. Consult the table above to find out which type suits your use case.
<div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
<Message type="positive">
<Paragraph>Use "positive" messages when something has gone well or is going well.</Paragraph>
</Message>
<Message type="neutral">
<Paragraph>Use "neutral" messages when something is neither positive or negative.</Paragraph>
</Message>
<Message type="warning">
<Paragraph>Use "warning" messages when something requires attention.</Paragraph>
</Message>
<Message type="negative">
<Paragraph>Use "negative" messages when something has gone wrong.</Paragraph>
</Message>
</div>Title
Use the namespaced Message.Title component to provide a Message with a Heading. Note, it's required to specify the heading level of the title. This does not affect the appearance of the title. It will always look like an H6.
- Use Case: Longer messages where a title helps to summarize the main point.
- Best Practice: Keep the title concise and descriptive. Use a heading level (H6) that reflects the content's hierarchy.
<Message type="neutral">
<Message.Title headingLevel="h3">Lorem ipsum</Message.Title>
<Paragraph>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book.
</Paragraph>
</Message>Footer
Use the namespaced Message.Footer component when the Message encourages users to navigate somewhere or perform an action. It can, for example, contain a Link, as shown below.
- Use Case: Messages that require user interaction, such as confirmations, prompts, or calls to action.
- Best Practice: Use clear and concise button labels. Prioritize primary actions. Limit the number of buttons for clarity.
<Message type="neutral">
<Message.Title headingLevel="h3">Lorem ipsum</Message.Title>
<Paragraph>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book.
</Paragraph>
<Message.Footer>
<Link href="#">Lorem ipsum</Link>
</Message.Footer>
</Message>The Message.Footer can also contain Buttons. Try to limit this to a single primary Button or a primary and default Button, as exemplified below.
<Message type="neutral">
<Message.Title headingLevel="h3">Lorem ipsum</Message.Title>
<Paragraph>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book.
</Paragraph>
<Message.Footer>
<Button variant="default">Primary action</Button>
<Button variant="borderless">Alternative action</Button>
</Message.Footer>
</Message>Dismissible
Use the dismissible property when a Message needs inline actions and a separate close control at the same time. This is useful for conversational AI patterns where the message should stay inline until the user dismisses it.
- Use Case: Inline guidance or system feedback that includes actions, but should also be dismissible independently.
- Best Practice: Keep the primary action focused, and use dismiss only when hiding the message does not block task completion.
<Message type="neutral" dismissible>
<Message.Title headingLevel="h3">Lorem ipsum</Message.Title>
<Paragraph>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book.
</Paragraph>
<Message.Footer>
<Button variant="default">Button</Button>
</Message.Footer>
</Message>Compact
Use the compact property to reduce the size and internal spacing of the Message. Use this property when the Message is placed in a small container, such as a Popover.
- Use Case: When the Message is placed in a small container, such as a Popover.
- Best Practice: Ensure the content remains legible and accessible even in the compact form.
<Message type="neutral" compact>
<Message.Title headingLevel="h3">Lorem ipsum</Message.Title>
<Paragraph>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book.
</Paragraph>
<Message.Footer>
<Button variant="default">Primary action</Button>
<Button variant="borderless">Alternative action</Button>
</Message.Footer>
</Message>Properties
| Property | Description | Defined | Value |
|---|---|---|---|
childrenOptional | elementThe content of the message | ||
typeOptional | "negative" | "neutral" | "positive" | "warning"Controls the color and icon of the message - defaults to "neutral" | ||
compactOptional | booleanReduces the spacing and padding of the container | ||
dismissibleOptional | booleanAdds a close control that dismisses the message when triggered | ||
onDismissOptional | functionCalled when the dismiss button is clicked. | ||
data-observe-keyOptional | stringUnique string, used by external script e.g. for event tracking | ||
classNameOptional | stringCustom className that's applied to the outermost element (only intended for special cases) | ||
styleOptional | objectStyle object to apply custom inline styles (only intended for special cases) |
Guidelines
Best practices
Do not use when
Accessibility
Explore detailed guidelines for this component: Accessibility Specifications