Alerts - ViewComponent Edition

Reusable alert components with Stimulus, Hotwire & Turbo Frame support

← Back to Home

🔔 Toast Notification Positions

Alerts can appear in different positions - all auto-dismiss after 5 seconds

📍 Top Right (Default)

Classic notification position - appears at top-right corner

📍 Top Left

Alternative position - appears at top-left corner

📍 Top Center

Centered position - appears at top-center (great for important messages)

📍 Bottom Right

Bottom position - appears at bottom-right (like chat notifications)

ERB (Layout + Turbo Stream)

<!-- In app/views/layouts/application.html.erb -->
<div id="notifications-top-right" class="fixed top-4 right-4 ..."></div>
<div id="notifications-top-left" class="fixed top-4 left-4 ..."></div>
<div id="notifications-top-center" class="fixed top-4 left-1/2 -translate-x-1/2 ..."></div>
<div id="notifications-bottom-right" class="fixed bottom-4 right-4 ..."></div>

<!-- Usage -->
render turbo_stream: turbo_stream.append("notifications-top-right", alert_html)

Basic Alerts

Simple alert messages - appears at top-right

Click buttons to see basic alerts at the top-right corner:

ERB (ViewComponent)

<%= render(AlertComponent.new(variant: :success, message: "Success! Your changes have been saved.")) %>
<%= render(AlertComponent.new(variant: :error, message: "Error! There was a problem with your request.")) %>
<%= render(AlertComponent.new(variant: :warning, message: "Warning! Please review before proceeding.")) %>
<%= render(AlertComponent.new(variant: :info, message: "Info: Here's some helpful information.")) %>

Alerts with Title

Detailed alerts with title - appears at top-left

Click buttons to see alerts with titles at the top-left corner:

ERB (ViewComponent)

<%= render(AlertComponent.new(
  variant: :success,
  title: "Order completed",
  message: "Your order has been successfully processed and will be shipped within 2-3 business days."
)) %>

Important Alerts

Critical messages - appears at top-center (with auto-dismiss)

Click buttons to see important alerts at the top-center (dismissible & auto-dismiss):

ERB (ViewComponent + Stimulus)

<%= render(AlertComponent.new(
  variant: :info,
  message: "This alert can be dismissed",
  dismissible: true
)) %>

<!-- With auto-dismiss -->
<%= render(AlertComponent.new(
  variant: :success,
  message: "This will auto-dismiss in 5 seconds",
  dismissible: true,
  auto_dismiss: true,
  dismiss_after: 5000
)) %>

Chat/Message Notifications

Message-style alerts - appears at bottom-right

Click buttons to see notifications at the bottom-right (like chat messages):

ERB (ViewComponent)

<%= render(AlertComponent.new(
  variant: :error,
  title: "Please fix the following errors:",
  list_items: [
    "Email address is required",
    "Password must be at least 8 characters",
    "Phone number format is invalid"
  ]
)) %>

🌍 Real-World Use Cases

Practical examples you'll actually use in your applications

📝 Form Validation Errors

Display validation errors with a list - appears at top-center for visibility

3 errors prevented this form from being saved:

Email can't be blank
Password is too short (minimum is 8 characters)
Password confirmation doesn't match

<% if @user.errors.any? %>
  <%= render(AlertComponent.new(
    variant: :error,
    title: "#{pluralize(@user.errors.count, 'error')} prevented this form from being saved:",
    list_items: @user.errors.full_messages
  )) %>
<% end %>

🎯 Alerts with Action Buttons (Block Content)

Add custom buttons and content using block syntax - perfect for upgrade prompts

Storage Almost Full

You've used 9.2 GB of your 10 GB storage limit. Upgrade your plan to continue uploading files.

Note: To trigger this via Turbo Stream, you'd need to create a custom partial or use inline HTML. Click below for a simulated top-right notification:

<%= render(AlertComponent.new(variant: :warning, title: "Storage Almost Full")) do %>
  <p>You've used 9.2 GB of your 10 GB storage limit.</p>
  <div class="mt-4 flex gap-3">
    <button class="bg-yellow-100 ...">Upgrade Now</button>
    <button>Remind me later</button>
  </div>
<% end %>

⏰ Session Timeout Warning

Warn users about session expiry - appears at top-center with extended auto-dismiss

🛒 Shopping Cart Updates

Notify users about cart changes - appears at bottom-right (non-intrusive)

✉️ Email Verification Reminder

Persistent reminder for unverified users - appears at top-center (important action)

📤 File Upload Notifications

Keep users informed about uploads - appears at bottom-right

📡 Network Status Updates

Connection status alerts - appears at top-left (system-level info)

🏆 Achievement Unlocked

Gamification alerts - appears at top-right (celebratory)

💡 Usage Guide

All alerts are rendered using the AlertComponent and appear in positioned notification containers

Quick Reference

Variants: :success, :error, :warning, :info
Positions: top-right, top-left, top-center, bottom-right
Auto-dismiss: Add auto_dismiss: true, dismiss_after: 5000 (milliseconds)
Dismissible: All positioned alerts have X button by default

Controller Example

# In your controller action
respond_to do |format|
  format.turbo_stream do
    render turbo_stream: turbo_stream.append(
      "notifications-top-right",
      render(AlertComponent.new(
        variant: :success,
        title: "Success!",
        message: "Operation completed successfully."
      ))
    )
  end
end