Components
Toast
Toast
Display non-intrusive notifications or messages to users.
Simple
Successfully liked!
John Doe has been notified.
<div class="relative overflow-hidden">
<div aria-live="assertive" class="pointer-events-none absolute flex items-center justify-end px-4 py-6 sm:p-6 top-0 right-0 left-0 w-full animate-toast-from-right" data-controller="railsui-toast">
<div class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black/10 dark:bg-slate-950 dark:border dark:border-slate-700/80">
<div class="p-4">
<div class="flex items-start">
<div class="shrink-0">
<%= icon "hand-thumb-up", class: "size-6 text-blue-500 dark:text-blue-400" %>
</div>
<div class="ml-3 w-0 flex-1 pt-0.5">
<p class="text-sm font-medium text-slate-900 dark:text-white">Successfully liked!</p>
<p class="mt-1 text-sm text-slate-500 dark:text-slate-300">John Doe has been notified.</p>
</div>
<div class="ml-4 flex shrink-0">
<button type="button" class="inline-flex rounded-sm bg-white text-slate-400 hover:text-slate-500 focus:outline-hidden focus:ring-2 focus:ring-slate-50 dark:bg-transparent dark:focus:ring-slate-500 dark:hover:text-slate-100
dark:focus:text-slate-100" data-action="click->railsui-toast#hide">
<span class="sr-only">Close</span>
<%= icon "x-mark", class: "size-5" %>
</button>
</div>
</div>
</div>
</div>
</div>
</div><div class="relative overflow-hidden">
<div aria-live="assertive" class="pointer-events-none absolute flex items-center justify-end px-4 py-6 sm:p-6 top-0 right-0 left-0 w-full animate-toast-from-right" data-controller="railsui-toast">
<div class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black/10 dark:bg-slate-950 dark:border dark:border-slate-700/80">
<div class="p-4">
<div class="flex items-start">
<div class="shrink-0">
<%= icon "hand-thumb-up", class: "size-6 text-blue-500 dark:text-blue-400" %>
</div>
<div class="ml-3 w-0 flex-1 pt-0.5">
<p class="text-sm font-medium text-slate-900 dark:text-white">Successfully liked!</p>
<p class="mt-1 text-sm text-slate-500 dark:text-slate-300">John Doe has been notified.</p>
</div>
<div class="ml-4 flex shrink-0">
<button type="button" class="inline-flex rounded-sm bg-white text-slate-400 hover:text-slate-500 focus:outline-hidden focus:ring-2 focus:ring-slate-50 dark:bg-transparent dark:focus:ring-slate-500 dark:hover:text-slate-100
dark:focus:text-slate-100" data-action="click->railsui-toast#hide">
<span class="sr-only">Close</span>
<%= icon "x-mark", class: "size-5" %>
</button>
</div>
</div>
</div>
</div>
</div>
</div>.relative.overflow-hidden
.pointer-events-none.absolute.flex.items-center.justify-end.px-4.py-6.sm:p-6.top-0.right-0.left-0.w-full.animate-toast-from-right(aria-live="assertive" data-controller="railsui-toast")
.pointer-events-auto.w-full.max-w-sm.overflow-hidden.rounded-md.bg-white.shadow-lg.ring-1.ring-black.dark:bg-slate-950.dark:border(class="dark:border-slate-700/80 ring-black/10")
.p-4
.flex.items-start
.shrink-0
= icon "hand-thumb-up", class: "size-6 text-blue-500 dark:text-blue-400"
.ml-3.w-0.flex-1(class="pt-0.5")
%p.text-sm.font-medium.text-slate-900.dark:text-white Successfully liked!
%p.mt-1.text-sm.text-slate-500.dark:text-slate-300 John Doe has been notified.
.ml-4.flex.shrink-0
%button.inline-flex.rounded-sm.bg-white.text-slate-400.hover:text-slate-500.focus:outline-hidden.focus:ring-2.focus:ring-slate-50.dark:bg-transparent.dark:focus:ring-slate-500.dark:hover:text-slate-100.dark:focus:text-slate-100(data-action="click->railsui-toast#hide" type="button")
%span.sr-only Close
= icon "x-mark", class: "size-5"import { RailsuiToast } from 'railsui-stimulus'
application.register('railsui-toast', RailsuiToast)Use toasts to deliver real-time updates to a user without disrupting their flow.
Options
-
triggerOnLoad(data-railsui-toast-trigger-on-load-value="true"): Make the toast notification appear as soon as initialized. Defaults tofalse.
CSS
Toasts typically enter the screen from the left or right side of the viewport. This example accounts for those two variants by extending your Tailwind Theme variables to include new animation-based CSS variables.
/* Add to app/assets/stylesheets/railsui/theme.css */
--animate-toast-from-right: toast-from-right 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
--animate-toast-from-left: toast-from-left 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
@keyframes toast-from-right {
0% {
transform: translateX(50%);
opacity: 0%;
}
100% {
transform: translateX(0);
opacity: 100%;
}
}
@keyframes toast-from-left {
0% {
transform: translateX(-50%);
opacity: 0%;
}
100% {
transform: translateX(0);
opacity: 100%;
}
}