lab components / Feedback

Message

Provide users with essential information, feedback, or status updates related to actions or system states.

How to select a suitable type of message:Examples Properties Guidelines

This is a Lab component!

That means it doesn't satisfy our definition of done and may be changed or even deleted. For an exact status, please reach out to the Fancy team through the dev_fancy or ux_fancy channels.

import { Message } from "@siteimprove/fancylab";

#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
Neutral	Blue	IconInfoOutline	General information, status updates, or feedback.	Avoid overusing neutral messages. Reserve for situations where no specific sentiment is needed.
Positive	Green	IconSuccess	Success messages, confirmations, or positive feedback.	Clearly state the successful action or outcome.
Warning	Yellow	IconWarningOutline	Potential issues, cautionary alerts, or recommendations for alternative actions.	Provide specific instructions on how to address the warning.
Critical	Orange	IconWarning	Critical errors, failures, or urgent situations requiring immediate attention.	Clearly state the problem and provide immediate steps for resolution.
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.

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 (information, success, warning, etc.).
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).

This is a default message.

CodeHTML output

<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.

Use "neutral" messages when something is neither positive or negative.

Use "positive" messages when something has gone well or is going well.

Use "warning" messages when something requires attention, but isn't critial/time-sensitive.

Use "critical" messages when something is critical/time-sensitive and requires immediate attention.

Use "negative" messages when something has gone wrong.

CodeHTML output

<div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
	<Message type="neutral">
		<Paragraph>Use "neutral" messages when something is neither positive or negative.</Paragraph>
	</Message>
	<Message type="positive">
		<Paragraph>Use "positive" messages when something has gone well or is going well.</Paragraph>
	</Message>
	<Message type="warning">
		<Paragraph>
			Use "warning" messages when something requires attention, but isn't critial/time-sensitive.
		</Paragraph>
	</Message>
	<Message type="critical">
		<Paragraph>
			Use "critical" messages when something is critical/time-sensitive and requires immediate
			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.

Lorem ipsum

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.

CodeHTML output

<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>

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.

Lorem ipsum

CodeHTML output

<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.

Lorem ipsum

CodeHTML output

<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="primary">Primary action</Button>
		<Button>Alternative action</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.

Lorem ipsum

CodeHTML output

<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="primary">Primary action</Button>
		<Button>Alternative action</Button>
	</Message.Footer>
</Message>

#Properties

This is a message.

CodePropsHTML output

Property	Description	Defined	Value
childrenOptional	`element`The content of the message	YesNo
typeOptional	`"critical" \| "negative" \| "neutral" \| "positive" \| "warning"`Controls the color and icon of the message - defaults to "neutral"	YesNo
compactOptional	`boolean`Reduces the spacing and padding of the container	YesNo	truefalse
data-observe-keyOptional	`string`Unique string, used by external script e.g. for event tracking	YesNo
classNameOptional	`string`Custom className that's applied to the outermost element (only intended for special cases)	YesNo
styleOptional	`object`Style object to apply custom inline styles (only intended for special cases)	YesNo

Provide users with important information or feedback about a task, action, or state.

#Placement

Message is typically used in the following places:

#Style

Siteimprove Design System: Adhere to Siteimprove's guidelines for color, typography, and spacing. If you are not using a component from Fancy, match the styling of your Message to existing components for visual consistency.

#Do not use when

The Message needs to be dismissible. Instead, use a Toast or Modal.
You need to show a validation error or warning in a form. These kinds of messages are built into the Form Element Wrapper component.

#Accessibility

For designers

Make sure to pick an appropriate heading level for the title of the Message.

For developers

This component comes with built-in accessibility, no extra work required.

Explore detailed guidelines for this component: Accessibility Specifications

#Writing

Use clear, concise, and actionable language

Message

This is a Lab component!

#How to select a suitable type of message:

#Examples

#Default

#Types

#Title

Lorem ipsum

#Footer

Lorem ipsum

Lorem ipsum

#Compact

Lorem ipsum

#Properties

#Guidelines

#Best practices

#General

#Placement

#Style

#Do not use when

#Accessibility

For designers

For developers

#Writing