Notification

The Notification component displays informative messages with configurable themes, icons, and action buttons.

Basic usage

The Notification component supports multiple content sections and themes with optional actions.

Component anatomy

Theme

Configure message appearance using the theme Input with five semantic options:

• Info: Informational messages (default)
• Success: Positive outcomes
• Alert: Warning states
• Danger: Error conditions
• News: Announcement states

Each theme includes matching colors and icons.

Content Structure

Component supports three content zones:

• Title (lmn-notification-title)
• Description (lmn-notification-description)
• Actions (lmn-notification-aside)

Icon Display

Control the leading icon through:

• Theme-based automatic icons
• Custom icon via iconSvgName
• Emoji support via emoji Input
• Icon size and spacing consistency

Visual Style

Customize appearance with:

• showOutline Input for border visibility
• Responsive padding
• Consistent spacing
• Word break handling

Negative Theme

Enable dark theme using the negative Input, affecting:

• Background colors
• Text colors
• Icon colors
• Border colors
• Action buttons

Accessibility

ARIA Implementation

Automatic role assignment:

• 'alert' role for danger theme
• 'status' role for other themes
• Custom role via role Input
• Proper labelling relationships

Content Structure

Semantic HTML with:

• Proper heading hierarchy
• Descriptive text relationships
• Action button labelling
• Icon purpose conveyed

Focus Management

Action buttons support:

• Logical tab order
• Clear focus indicators
• Proper button roles
• Keyboard activation

Best Practices for Developers

1. Theme Selection DEMO HERE

2. Content Organization DEMO HERE

3. Action Handling DEMO HERE