Helper Message

The Helper Message component displays contextual information with optional icons in different semantic states.

Basic usage

The Helper Message provides contextual feedback with customizable themes and optional icons.

Component anatomy

Theme

Configure the message appearance using the theme Input, which supports four semantic states:

• Neutral (default): For general information
• Alert: For warnings or cautions
• Danger: For errors or critical issues
• Success: For positive feedback

Each theme includes appropriate colors and icons.

Icon Support

Control icon visibility using the showIcon Input. When enabled (default), each theme displays a relevant icon:

• Neutral: Info icon
• Alert: Warning icon
• Danger: Dangerous icon
• Success: Check circle icon

Icons automatically match their theme's color scheme.

Content Display

The component supports:

• Text content
• Rich HTML content
• Empty state handling (component hides when empty)
• Automatic text wrapping

Negative Theme

Enable the negative variant using the negative Input for use on dark backgrounds. This adjusts:

• Text colors
• Icon colors
• Overall contrast

Accessibility

Color Contrast

The component ensures proper contrast ratios:

• Text against background
• Icons against background
• All theme variations
• Negative theme support

Screen Reader Support

Semantic structure for assistive technologies:

• Proper content hierarchy
• Theme-appropriate announcements
• Empty state handling
• Icon purpose conveyed

Content Management

Proper content handling ensures:

• Correct text wrapping
• Empty state detection
• Proper spacing
• Layout consistency

Best Practices for Developers

1. Theme Selection DEMO HERE

2. Content Guidelines DEMO HERE

3. Icon Usage DEMO HERE