Toast

Toast notifications for temporary, non-blocking messages.

Try It

Click any button to see a real toast notification.

Toast Variants

Different variants for different message types.

New message

You have a new notification.

Success!

Your changes have been saved.

Warning

Your session will expire soon.

Error

Something went wrong.

<%= render Rvk::ToastComponent.new(variant: :info) do %>
  <p class="font-medium">New message</p>
  <p class="text-sm">You have a new notification.</p>
<% end %>

<%= render Rvk::ToastComponent.new(variant: :success) do %>
  <p class="font-medium">Success!</p>
  <p class="text-sm">Your changes have been saved.</p>
<% end %>

<%= render Rvk::ToastComponent.new(variant: :warning) do %>
  <p class="font-medium">Warning</p>
  <p class="text-sm">Your session will expire soon.</p>
<% end %>

<%= render Rvk::ToastComponent.new(variant: :danger) do %>
  <p class="font-medium">Error</p>
  <p class="text-sm">Something went wrong.</p>
<% end %>

Positions

Toasts can appear in any corner of the screen. Click to try each position.

<%= render Rvk::ToastComponent.new(position: :top_left) { "Top Left" } %>
<%= render Rvk::ToastComponent.new(position: :top_right) { "Top Right" } %>
<%= render Rvk::ToastComponent.new(position: :bottom_left) { "Bottom Left" } %>
<%= render Rvk::ToastComponent.new(position: :bottom_right) { "Bottom Right" } %>

Auto Dismiss

Control when toasts automatically disappear.

auto_dismiss: 5000 - Dismiss after 5 seconds (default)

auto_dismiss: 3000 - Dismiss after 3 seconds

auto_dismiss: nil - Never auto-dismiss

<%= render Rvk::ToastComponent.new(auto_dismiss: 5000) { "Dismisses in 5 seconds" } %>
<%= render Rvk::ToastComponent.new(auto_dismiss: 3000) { "Dismisses in 3 seconds" } %>
<%= render Rvk::ToastComponent.new(auto_dismiss: nil) { "Never auto-dismisses" } %>

Props

Prop	Type	Default	Description
variant	Symbol	:info	Toast style: :info, :success, :warning, :danger
position	Symbol	:top_right	Screen position: :top_right, :top_left, :bottom_right, :bottom_left
auto_dismiss	Integer/nil	5000	Auto-dismiss delay in ms (nil to disable)
icon	Boolean	true	Show variant-specific icon