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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<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 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6 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 d="M12 16h.01"></path>
        <path d="M12 8v4"></path>
        <path d="M15.312 2a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2z"></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 xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6 shrink-0" 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 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path>
        <path d="M12 8v4"></path>
        <path d="M12 16h.01"></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 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6 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 d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path>
        <path d="M12 9v4"></path>
        <path d="M12 17h.01"></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" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6 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>
        <circle cx="12" cy="12" r="10"></circle>
        <path d="M12 16v-4"></path>
        <path d="M12 8h.01"></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 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6 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 d="M20 6 9 17l-5-5"></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 xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6 shrink-0" 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 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path>
        <path d="M12 8v4"></path>
        <path d="M12 16h.01"></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 xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 shrink-0" role="img" focusable="false" aria-labelledby="icon-title-circle-x icon-desc-circle-x"><title id="icon-title-circle-x">Circle-x</title>
        <desc id="icon-desc-circle-x">Circle-x icon</desc>
        <circle cx="12" cy="12" r="10"></circle>
        <path d="m15 9-6 6"></path>
        <path d="m9 9 6 6"></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.