RapidRails UI Book
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<div class="space-y-4">
  <div role="alert message" aria-live="polite" aria-atomic="true" data-controller="" data-rapidrailsui--fade-and-remove-target="container" data-rapidrailsui--fade-and-remove-remove-after-transition-value="true" data-rapidrailsui--fade-and-remove-transition-duration-value="400" data-rapidrailsui--countdown-duration-value="5" data-rapidrailsui--countdown-on-complete-value="rapidrailsui--dismiss#dismiss" data-rapidrailsui--dismiss-action="click->rapidrailsui--dismiss#dismiss" class="flex w-full max-w-xl overflow-hidden justify-start shadow-md bg-red-50 rounded-md transition-opacity duration-300">
    <!-- Icon Block -->
    <div class="flex items-center justify-center w-14 text-red-500 mr-2 bg-red-200" aria-hidden="true">
      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentColor" aria-hidden="true" class="block w-5 h-5 shrink-0" role="img" focusable="false" aria-labelledby="icon-title-danger icon-desc-danger"><title id="icon-title-danger">Danger</title>
        <desc id="icon-desc-danger">Danger icon</desc><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd"></path></svg>
    </div>
    <!-- Alert Content -->
    <div class="p-3 w-full flex flex-col">
      <h3 class="text-red-600 font-bold">Danger Alert</h3>
      <!-- Render the message if renders_one :message is used -->
      <div class="mt-2 text-sm text-red-600">
        This is a Danger alert with a neutral appearance.
      </div>
    </div>
  </div>
  <div role="alert message" aria-live="polite" aria-atomic="true" data-controller="" data-rapidrailsui--fade-and-remove-target="container" data-rapidrailsui--fade-and-remove-remove-after-transition-value="true" data-rapidrailsui--fade-and-remove-transition-duration-value="400" data-rapidrailsui--countdown-duration-value="5" data-rapidrailsui--countdown-on-complete-value="rapidrailsui--dismiss#dismiss" data-rapidrailsui--dismiss-action="click->rapidrailsui--dismiss#dismiss" class="flex w-full max-w-xl overflow-hidden justify-start shadow-md bg-gray-50 rounded-md transition-opacity duration-300">
    <!-- Icon Block -->
    <div class="flex items-center justify-center w-14 text-gray-500 mr-2 bg-gray-200" aria-hidden="true">
      <svg class="block w-5 h-5 shrink-0" viewbox="0 0 40 40" xmlns="http://www.w3.org/2000/svg" fill="currentColor" role="img" focusable="false" aria-labelledby="icon-title-default icon-desc-default"><title id="icon-title-default">Default</title>
        <desc id="icon-desc-default">Default icon</desc>
        <path d="M20 3.36667C10.8167 3.36667 3.3667 10.8167 3.3667 20C3.3667 29.1833 10.8167 36.6333 20 36.6333C29.1834 36.6333 36.6334 29.1833 36.6334 20C36.6334 10.8167 29.1834 3.36667 20 3.36667ZM19.1334 33.3333V22.9H13.3334L21.6667 6.66667V17.1H27.25L19.1334 33.3333Z"></path>
      </svg>
    </div>
    <!-- Alert Content -->
    <div class="p-3 w-full flex flex-col">
      <h3 class="text-gray-600 font-bold">Default Alert</h3>
      <!-- Render the message if renders_one :message is used -->
      <div class="mt-2 text-sm text-gray-600">
        This is a Default alert with a neutral appearance.
      </div>
    </div>
  </div>
  <div role="alert message" aria-live="polite" aria-atomic="true" data-controller="" data-rapidrailsui--fade-and-remove-target="container" data-rapidrailsui--fade-and-remove-remove-after-transition-value="true" data-rapidrailsui--fade-and-remove-transition-duration-value="400" data-rapidrailsui--countdown-duration-value="5" data-rapidrailsui--countdown-on-complete-value="rapidrailsui--dismiss#dismiss" data-rapidrailsui--dismiss-action="click->rapidrailsui--dismiss#dismiss" class="flex w-full max-w-xl overflow-hidden justify-start shadow-md bg-yellow-50 rounded-md transition-opacity duration-300">
    <!-- Icon Block -->
    <div class="flex items-center justify-center w-14 text-yellow-500 mr-2 bg-yellow-200" aria-hidden="true">
      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentColor" aria-hidden="true" class="block w-5 h-5 shrink-0" role="img" focusable="false" aria-labelledby="icon-title-warning icon-desc-warning"><title id="icon-title-warning">Warning</title>
        <desc id="icon-desc-warning">Warning icon</desc><path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
    </div>
    <!-- Alert Content -->
    <div class="p-3 w-full flex flex-col">
      <h3 class="text-yellow-600 font-bold">Warning Alert</h3>
      <!-- Render the message if renders_one :message is used -->
      <div class="mt-2 text-sm text-yellow-600">
        This is a Warning alert with a neutral appearance.
      </div>
    </div>
  </div>
  <div role="alert message" aria-live="polite" aria-atomic="true" data-controller="" data-rapidrailsui--fade-and-remove-target="container" data-rapidrailsui--fade-and-remove-remove-after-transition-value="true" data-rapidrailsui--fade-and-remove-transition-duration-value="400" data-rapidrailsui--countdown-duration-value="5" data-rapidrailsui--countdown-on-complete-value="rapidrailsui--dismiss#dismiss" data-rapidrailsui--dismiss-action="click->rapidrailsui--dismiss#dismiss" class="flex w-full max-w-xl overflow-hidden justify-start shadow-md bg-sky-50 rounded-md transition-opacity duration-300">
    <!-- Icon Block -->
    <div class="flex items-center justify-center w-14 text-sky-500 mr-2 bg-sky-200" aria-hidden="true">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" name="info" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="block w-5 h-5 shrink-0" role="img" focusable="false" aria-labelledby="icon-title-info icon-desc-info"><title id="icon-title-info">Info</title>
        <desc id="icon-desc-info">Info icon</desc>
        <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"></path>
      </svg>
    </div>
    <!-- Alert Content -->
    <div class="p-3 w-full flex flex-col">
      <h3 class="text-sky-600 font-bold">Info Alert</h3>
      <!-- Render the message if renders_one :message is used -->
      <div class="mt-2 text-sm text-sky-600">
        This is an Info alert with a neutral appearance.
      </div>
    </div>
  </div>
  <div role="alert message" aria-live="polite" aria-atomic="true" data-controller="" data-rapidrailsui--fade-and-remove-target="container" data-rapidrailsui--fade-and-remove-remove-after-transition-value="true" data-rapidrailsui--fade-and-remove-transition-duration-value="400" data-rapidrailsui--countdown-duration-value="5" data-rapidrailsui--countdown-on-complete-value="rapidrailsui--dismiss#dismiss" data-rapidrailsui--dismiss-action="click->rapidrailsui--dismiss#dismiss" class="flex w-full max-w-xl overflow-hidden justify-start shadow-md bg-teal-50 rounded-md transition-opacity duration-300">
    <!-- Icon Block -->
    <div class="flex items-center justify-center w-14 text-teal-500 mr-2 bg-teal-200" aria-hidden="true">
      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentColor" aria-hidden="true" class="block w-5 h-5 shrink-0" role="img" focusable="false" aria-labelledby="icon-title-success icon-desc-success"><title id="icon-title-success">Success</title>
        <desc id="icon-desc-success">Success icon</desc><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"></path></svg>
    </div>
    <!-- Alert Content -->
    <div class="p-3 w-full flex flex-col">
      <h3 class="text-teal-600 font-bold">Success Alert</h3>
      <!-- Render the message if renders_one :message is used -->
      <div class="mt-2 text-sm text-teal-600">
        This is a Success alert with a neutral appearance.
      </div>
    </div>
  </div>
  <div role="alert message" aria-live="polite" aria-atomic="true" data-controller="rapidrailsui--fade-and-remove rapidrailsui--countdown rapidrailsui--dismiss" data-rapidrailsui--fade-and-remove-target="container" data-rapidrailsui--fade-and-remove-remove-after-transition-value="true" data-rapidrailsui--fade-and-remove-transition-duration-value="400" data-rapidrailsui--countdown-duration-value="10" data-rapidrailsui--countdown-on-complete-value="rapidrailsui--dismiss#dismiss" data-rapidrailsui--dismiss-action="click->rapidrailsui--dismiss#dismiss" class="flex w-full max-w-xl overflow-hidden justify-start shadow-md bg-gray-50 transition-opacity duration-300">
    <!-- Icon Block -->
    <div class="flex items-center justify-center w-14 text-gray-500 mr-2 bg-gray-200" aria-hidden="true">
      <svg class="block w-5 h-5 shrink-0" viewbox="0 0 40 40" xmlns="http://www.w3.org/2000/svg" fill="currentColor" role="img" focusable="false" aria-labelledby="icon-title-default icon-desc-default"><title id="icon-title-default">Default</title>
        <desc id="icon-desc-default">Default icon</desc>
        <path d="M20 3.36667C10.8167 3.36667 3.3667 10.8167 3.3667 20C3.3667 29.1833 10.8167 36.6333 20 36.6333C29.1834 36.6333 36.6334 29.1833 36.6334 20C36.6334 10.8167 29.1834 3.36667 20 3.36667ZM19.1334 33.3333V22.9H13.3334L21.6667 6.66667V17.1H27.25L19.1334 33.3333Z"></path>
      </svg>
    </div>
    <!-- Alert Content -->
    <div class="p-3 w-full flex flex-col">
      <h3 class="text-gray-600 font-bold">Dismissable Alert</h3>
      <!-- Render the message if renders_one :message is used -->
      <div class="mt-2 text-sm text-gray-600">
        This is a Dismissable Alert with a square shape will automatically dismiss soon!
      </div>
    </div>
    <!-- Countdown Timer -->
    <span data-rapidrailsui--countdown-target="display" class="flex items-center mx-2 text-sm font-medium text-gray-500"></span>
    <!-- Dismiss Button -->
    <button type="button" class="p-2" data-action="click->rapidrailsui--dismiss#dismiss">
      <svg viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-gray-400 w-5 h-5 shrink-0" role="img" focusable="false" aria-labelledby="icon-title-x-circle icon-desc-x-circle"><title id="icon-title-x-circle">X-circle</title>
        <desc id="icon-desc-x-circle">X-circle icon</desc>
        <path d="M9.75 9.75L14.25 14.25M14.25 9.75L9.75 14.25M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
    </button></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<div class="space-y-4">
  <%= rui_alert(title: "Danger Alert", type: :danger) do |c| %>
    <% c.with_message do %>
      This is a Danger alert with a neutral appearance.
    <% end %>
  <% end %>
  <%= rui_alert(title: "Default Alert", type: :default) do |c| %>
    <% c.with_message do %>
      This is a Default alert with a neutral appearance.
    <% end %>
  <% end %>
  <%= rui_alert(title: "Warning Alert", type: :warning) do |c| %>
    <% c.with_message do %>
      This is a Warning alert with a neutral appearance.
    <% end %>
  <% end %>
  <%= rui_alert(title: "Info Alert", type: :info) do |c| %>
    <% c.with_message do %>
      This is an Info alert with a neutral appearance.
    <% end %>
  <% end %>
  <%= rui_alert(title: "Success Alert", type: :success) do |c| %>
    <% c.with_message do %>
      This is a Success alert with a neutral appearance.
    <% end %>
  <% end %>
  <%= rui_alert(title: "Dismissable Alert", type: :default, shape: :square, auto_dismiss: true, dismiss_after: 10 , dismiss_button: true) do |c| %>
    <% c.with_message do %>
      This is a Dismissable Alert with a square shape will automatically dismiss soon!
    <% end %>
  <% end %>
</div>

Alert Messages Overview

This preview showcases various types of alert messages, each with its own characteristics:

  • Danger: For critical warnings or errors
  • Warning: For important cautions
  • Info: For general information
  • Success: For positive outcomes
  • Default: For neutral messages

Each alert demonstrates:

  • Unique styling based on alert type
  • Optional title and message
  • Customizable content block

How to use:

<%= rui_alert(title: "Important!", type: :warning) do |c| %>
  <% c.with_message do %>
    Please review your settings.
  <% end %>
<% end %>

For customization options, check out the 'Playground' section!

No params configured.