Logo
Neura
Back to Home

Alert

Contextual feedback messages for user actions

Basic Usage

The most basic alert with a simple message:
This is an informational alert 
<neura::alerts type="info">
    This is an informational alert
</neura::alerts>

Types

Alerts are available in 4 types with automatic colors and icons:
This is an informational message
Operation completed successfully!
Please review before proceeding
An error occurred, please try again 
<neura::alerts type="info">...</neura::alerts>
<neura::alerts type="success">...</neura::alerts>
<neura::alerts type="warning">...</neura::alerts>
<neura::alerts type="error">...</neura::alerts>

Color Variants

Alerts support 13 color variants for enhanced visual communication:
Blue
Blue alert message
Green
Green alert message
Yellow
Yellow alert message
Orange
Orange alert message
Red
Red alert message
Purple
Purple alert message
Pink
Pink alert message
Teal
Teal alert message
Neutral
Neutral alert message

With Content Slot

Use the heading and content slots to structure your alert:
New Feature Available
We've just released a new dashboard analytics feature. Check it out in your settings panel.
Account Created
Your account has been successfully created. Welcome to Neura!
Subscription Expiring Soon
Your subscription will expire in 3 days. Please update your payment method to continue using our services.
Payment Failed
We couldn't process your payment. Please check your card details and try again. 
<neura::alerts type="success">
    <x-slot:heading>
        Title Here
    </x-slot:heading>
    <x-slot:content>
        Detailed message content
    </x-slot:content>
</neura::alerts>

With Actions

Add action buttons with the actions slot:
Update Available
A new version of the application is available. Update now to get the latest features.
Confirm Action
This action cannot be undone. Are you sure you want to proceed? 
<neura::alerts type="info">
    <x-slot:heading>Title</x-slot:heading>
    <x-slot:content>Message</x-slot:content>
    <x-slot:actions>
        <div class="flex gap-2 mt-3">
            <neura::button>Action</neura::button>
        </div>
    </x-slot:actions>
</neura::alerts>

Custom Icons

Customize the icon with iconName:
Great idea! This feature will help improve your workflow.
Congratulations! You've completed all tasks.
Time is running out. Complete this before the deadline.
Security alert: Suspicious activity detected. 
<neura::alerts type="info" iconName="light-bulb">
    Custom icon alert
</neura::alerts>

Without Icons

Remove the icon if needed:
This alert has no icon
Success message without icon 
<neura::alerts type="info" :icon="false">
    Alert without icon
</neura::alerts>

Use Cases

Common usage examples:

Form Validation

Validation Errors
  • The email field is required
  • The password must be at least 8 characters
  • The passwords do not match

System Notifications

Maintenance Scheduled
The system will be down for maintenance on Saturday from 2:00 AM to 4:00 AM UTC.

Feature Announcements

New Dashboard Released!
We've completely redesigned the dashboard with better performance and new analytics features.

Payment & Billing

Payment Method Required
Please add a payment method to continue using premium features.

All Types Showcase

Complete overview of all alert types:
Information
Blue themed alert for informational messages. Use for general information, tips, or neutral notifications.
Success
Green themed alert for success messages. Perfect for confirmations, completed actions, or positive outcomes.
Warning
Orange themed alert for warnings. Use for cautionary messages that require user attention.
Error
Red themed alert for errors. Display when something went wrong or requires immediate action.

Complex Content

Alerts can contain any content:
Getting Started Guide

Follow these steps to set up your account:

  1. Verify your email address
  2. Complete your profile
  3. Choose a subscription plan
  4. Invite your team members
<neura::alerts type="info">
    <x-slot:heading>Title</x-slot:heading>
    <x-slot:content>
        <ol>
            <li>Step 1</li>
            <li>Step 2</li>
        </ol>
    </x-slot:content>
    <x-slot:actions>
        <neura::button>Action</neura::button>
    </x-slot:actions>
</neura::alerts>

Advanced Color Usage

Combine colors with custom icons for enhanced visual impact and context:
Premium Features Available
Unlock powerful new capabilities with our premium plan. Upgrade now to access advanced analytics and automation tools.
New Updates Released
We've just released version 2.5 with improved performance, new dashboard features, and enhanced security.
Limited Time Offer!
Get 50% off on all plans this weekend only. Don't miss this exclusive opportunity to save big!
Reward Unlocked
Congratulations! You've earned a special bonus. Claim your reward and enjoy exclusive perks. 
<!-- Premium Features -->
<neura::alerts type="info" iconName="rocket-launch" iconClass="!text-purple-500">
    Premium alert message
</neura::alerts>

<!-- New Updates -->
<neura::alerts type="success" iconName="sparkles" iconClass="!text-teal-500">
    New feature alert
</neura::alerts>

<!-- Limited Offers -->
<neura::alerts type="warning" iconName="fire" iconClass="!text-orange-600">
    Limited time alert
</neura::alerts>

<!-- Rewards -->
<neura::alerts type="success" iconName="gift" iconClass="!text-pink-500">
    Reward notification
</neura::alerts>

Icon Customization

Fully customize icons:
Launch your product faster with Neura's pre-built components
You've received a special bonus reward!
Hot deal! Limited time offer expires in 24 hours 
<neura::alerts
    type="info"
    iconName="rocket-launch"
    iconClass="!text-purple-500"
>
    Message here
</neura::alerts>

Best Practices

Use the right type for the context

Info for information, Success for success, Warning for attention, Error for errors

Keep messages concise

Short and clear messages for better understanding

Add relevant actions

Always provide a clear action the user can take

Position strategically

Place alerts near the related content for context

Don't overuse alerts

Too many alerts reduce their effectiveness and fatigue users

Color & Type Reference

Comprehensive reference for semantic types and color variants with their default icons and recommended use cases:
Type/Color Badge Default Icon Use Case
info General information, tips, helpful hints
success Successful actions, confirmations, positive outcomes
yellow Mild cautions, non-urgent warnings
warning Warnings, cautions requiring attention
error Errors, failures, critical issues
purple Premium features, special offers
pink Rewards, gifts, special notifications
teal New updates, announcements, fresh features
neutral Neutral notices, general messages

Properties

Property Type Default Description
type string info Semantic alert type: info, success, warning, error (legacy)
color string null Color variant: blue, green, yellow, orange, red, purple, pink, teal, neutral
icon boolean true Show/hide icon
iconName string auto Custom icon name
iconClass string null Custom icon classes
heading slot null Alert title
content slot null Alert body content
actions slot null Action buttons