Message
Colored text box to highlight information
Introduction
A message is a colored text box used to highlight important information on a page and draw the user's attention. Messages can be placed within the content area of a page, within a components like modal or section. All messages can include links, allowing you to direct users to another page. Note: For expandable messages, any links must be placed within the expandable section.
Message can be used to communicate various types of content:
Example: Notifying the user about a new update, warning about a system outage, pointing out a typo in a form, or confirming that an action was successfully completed.
Variants
- Basic message: Standard message style for general use cases.
- Expandable message: Collapsible message style for optional or lengthy information.
Interactive demo
Try the interactive demo below to explore different message states and styles.
Best practices
- Clear and concise: Keep the message text to the point to ensure users can quickly understand the information being conveyed.
- Use appropriate states: Choose the correct message state to match the context and importance of the information.
- Avoid overuse: Use messages sparingly to prevent overwhelming users and diluting the impact of important information.
- Consistent placement: Position messages consistently within the UI to help users quickly locate and recognize them.
Status bar
The Message component includes a prop that enables a status bar variant. This is perfect for highlighting high-priority messages that require more detailed information. Use it for critical updates or important notifications. The status bar automatically inherits the message's state color for consistent visual cues.
Badge
You can add a badge to the message to give it more emphasis. This is useful for highlighting new or important information.
Message in components
Message can be used within various components to enhance their functionality and provide important notifications. See the links below for more information on how messages can be integrated with these components.