The <Message> component is a simple container for messages.
The Message block comes in four variants: plain, info, warning, and alert. Each variant uses a different color and icon. Below are examples in which situations to use the variants.
This is the plain variant. Use it for simple notes, neutral remarks, or secondary information that doesn’t require emphasis.
Example: This component is defined in src/components/Message.tsx.
This is the info variant. Use it to share helpful or contextual information about the code or component.
Example: This hook is useful for managing form state.
This is the warning variant. Use it to call attention to potential pitfalls, limitations, or special cases to consider when using the code.
Example: This component has not been tested with server-side rendering.
This is the alert variant. Use it for strict requirements, do-nots, or critical caveats that must be followed when using the code.
Example: You must not use this component inside a React Suspense boundary.
You can use arbitrary markdown inside the message, or even blocks. Note that not all combinations have been exhaustively tested. If you come across markup that doesn't render well, please raise an issue in the Timvir project.
Short Messages should place the title in front of the message and make it stand out.
Longer messages should make the title a separate block element. This body uses links and italic text.
And multiple paragraphs. And even a component: