Components

Flash

Theme

Hound

Framework

Tailwind CSS

Flash messages

Notice

A message commonly displayed at the top of the viewport on Rails apps after something changes.

.html
.html.erb
.haml.erb

<div class="bg-indigo-600 text-white text-center p-4" role="alert">
  <p>A message commonly displayed at the top of the viewport on <a href="https://rubyonrails.org">Rails</a> apps after something changes.</p>
</div>

<% if notice %>
<div class="bg-indigo-600 text-white text-center p-4" role="alert">
  <p><%= sanitize notice %></p>
</div>
<% end %>

- if notice
  .bg-indigo-600.text-white.text-center.p-4{:role => "alert"}
    %p= sanitize notice

Flash messages

Warning or Alert

A message commonly displayed at the top of the viewport on Rails apps when an error or exception occurs.

.html
.html.erb
.haml.erb

<div class="bg-rose-600 text-white text-center p-4" role="alert">
  <p>A message commonly displayed at the top of the viewport on <a class="font-bold underline" href="https://rubyonrails.org" class="font-bold underline">Rails</a> apps 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 notice

Flash messages

Dynamic

JavaScript

The Stimulus.js AlertController is not included with Rails UI by default.

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 at the top of the viewport on Rails apps after something changes.

.html
.html.erb
.haml.erb
.js

<div class="bg-indigo-600 text-white text-center p-4" role="alert" data-controller="alert">
  <p>This message would dissapear after 4 seconds using the Stimulus AlertController.</p>
</div>

<% if notice %>
<div class="bg-indigo-600 text-white text-center p-4" role="alert" data-controller="alert">
  <p><%= sanitize notice %></p>
</div>
<% end %>

- if notice
  .bg-indigo-600.text-white.text-center.p-4{"data-controller" => "alert", :role => "alert"}
    %p= sanitize notice

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    if (this.element) {
      setTimeout(() => {
        this.element.remove()
      }, 4000)
    }
  }
}

Dropdowns

Modals