Logo
Neura
Back to Home

Getting Started

Introduction
Installation
Usage
Dark Mode
Theming
Layouts

Components

Atoms

Form Elements

Field
Label
Description
Fieldset
Form
Input
Textarea
Select
Autocomplete
Calendar
Date Picker
Rich Editor
Checkbox
Radio
Switch
OTP
Dropzone
Tags Input

Layout

Container
Grid
Stack
Box
Card
Divider
Spacer

Navigation

Navlist
Link

Feedback

Alert
Callout
Toast
Dialog
Modal
Popover

Content

Text
Heading
Brand
Lottie
Skeleton

Data Display

Table
Chart
Kanban
Image Gallery
Tabs
Accordion
Badge
Avatar

Actions

Button
Command Palette
Composer
Context Menu
Dropdown

Utilities

Theme Switcher
Wizard

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>

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>

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 Reference

Color guide by type:
Type Color Icon Usage
info General information, tips
success Successful actions, confirmations
warning Warnings, cautions
error Errors, failures, critical issues

Properties

Property Type Default Description
type string info Alert type (info, success, warning, error)
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