Message

Overview

This documentation provides instructions on how to use the Message component in your React projects. The Message component is part of the abaabil.message library.

import Message from 'abaabil.message';

Key Features

• Supports multiple message types (error, success, warning, info)
• Automatically applies appropriate styling based on message type
• Implements accessibility features with proper ARIA attributes
• Conditional rendering based on message presence

Basic Usage

The Message component is designed to provide a consistent and accessible way to display feedback messages such as errors, success notifications, warnings, and informational messages. It supports different message types with appropriate styling and accessibility attributes.

Message Variations

The Message component supports various message types. Here are examples of different variations:

Success Message

Warning Message

Info Message

Usage in Forms

When using the Message component in forms, you can associate it with specific form fields for improved accessibility:In this example, the aria-describedby attribute on the input references the ID of the Message, ensuring that screen readers associate the error message with the input field.

Properties

The Message component accepts the following properties:

Accessibility

The Message component is designed with accessibility in mind:

• Uses aria-live regions for dynamic content updates
• Applies appropriate roles based on message type (alert or status)
• Ensures proper color contrast for different message types

Styling

The Message component uses Tailwind CSS classes for styling:

• Default text size of 'text-default-sm'
• Color classes based on message type (e.g., 'text-error' for error messages)
• Fallback to 'text-stable-muted' for undefined types
• Customizable through the className prop

Best Practices

Follow these best practices when using the Message component:

• Use appropriate message types for different scenarios (e.g., 'error' for form validation errors)
• Keep message content concise and clear
• Provide unique IDs when using multiple messages in the same context
• Use the component consistently throughout your application for a unified user experience

Use Cases

The Message component is particularly useful in scenarios such as:

• Displaying form validation errors
• Showing success messages after form submission
• Presenting warnings or important information to users
• Providing feedback for asynchronous operations

Integration with Other Components

The Message component can be easily integrated with other Abaabil components:

• Use with Form components to display validation messages
• Combine with Alert components for more prominent notifications
• Incorporate in Modal or Dialog components for contextual feedback

Customization Examples

Explore these customization examples to tailor the Message component to your needs: