Components
Flash
Flash
Displays an alert or notice message after something updates in a given Rails app.
Notice
A message commonly displayed after something changes.
<div class="bg-primary-600 text-white text-center p-4" role="alert">
<p>A message commonly displayed after something changes.</p>
</div><% if notice %>
<div class="bg-primary-600 text-white text-center p-4" role="alert">
<p><%= sanitize notice %></p>
</div>
<% end %>- if notice
.bg-primary-600.text-white.text-center.p-4{:role => "alert"}
%p= sanitize noticeAlert
A message commonly displayed when an error or exception occurs.
<div class="bg-rose-600 text-white text-center p-4" role="alert">
<p>A message commonly displayed when an error or exception occurs.</p>
</div><% if notice %>
<div class="bg-rose-600 text-white text-center p-4" role="alert">
<p><%= sanitize notice %></p>
</div>
<% end %>- if notice
.bg-rose-600.text-white.text-center.p-4{:role => "alert"}
%p= sanitize noticeDynamic
For some flash messages you may want to have them hide after a brief period. This requires JavaScript but is fairly simple to implement with Stimulus.js or Vanilla JavaScript.
A message commonly displayed after something changes.
<div class="bg-primary-600 text-white text-center p-4" role="alert" data-controller="alert">
<p>A message commonly displayed after something changes.</p>
</div><% if notice %>
<div class="bg-primary-600 text-white text-center p-4" role="alert" data-controller="alert">
<p><%= sanitize notice %></p>
</div>
<% end %>- if notice
.bg-primary-600.text-white.text-center.p-4{"data-controller" => "alert", :role => "alert"}
%p= sanitize noticeimport { Controller } from "@hotwired/stimulus"
export default class extends Controller {
connect() {
if (this.element) {
setTimeout(() => {
this.element.remove()
}, 4000)
}
}
}