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
<div class="flex flex-col gap-4 max-w-lg"> <div role="alert" aria-live="assertive" aria-atomic="true" class="relative w-full rounded-md border p-4 flex items-start gap-3 [&>i]:translate-y-0.5 [&>i]:shrink-0 bg-background text-foreground border-input"> <i data-lucide="info" class="inline-block w-4 h-4 shrink-0" aria-hidden="true"></i> <div class="flex flex-col gap-1 min-w-0 flex-1"> <h5 class="font-medium leading-none tracking-tight">Default</h5> <div class="text-sm leading-relaxed [&_p]:leading-relaxed">This is a default alert with important information.</div> </div> </div> <div role="alert" aria-live="assertive" aria-atomic="true" class="relative w-full rounded-md border p-4 flex items-start gap-3 [&>i]:translate-y-0.5 [&>i]:shrink-0 bg-emerald-50 text-emerald-800 border-emerald-300 dark:bg-emerald-950/30 dark:text-emerald-200 dark:border-emerald-800"> <i data-lucide="circle-check" class="inline-block w-4 h-4 shrink-0" aria-hidden="true"></i> <div class="flex flex-col gap-1 min-w-0 flex-1"> <h5 class="font-medium leading-none tracking-tight">Success</h5> <div class="text-sm leading-relaxed [&_p]:leading-relaxed">Your changes have been saved successfully.</div> </div> </div> <div role="alert" aria-live="assertive" aria-atomic="true" class="relative w-full rounded-md border p-4 flex items-start gap-3 [&>i]:translate-y-0.5 [&>i]:shrink-0 bg-destructive/10 text-destructive border-destructive/30"> <i data-lucide="circle-alert" class="inline-block w-4 h-4 shrink-0" aria-hidden="true"></i> <div class="flex flex-col gap-1 min-w-0 flex-1"> <h5 class="font-medium leading-none tracking-tight">Destructive</h5> <div class="text-sm leading-relaxed [&_p]:leading-relaxed">There was a problem with your request.</div> </div> </div> <div role="alert" aria-live="assertive" aria-atomic="true" class="relative w-full rounded-md border p-4 flex items-start gap-3 [&>i]:translate-y-0.5 [&>i]:shrink-0 bg-amber-50 text-amber-800 border-amber-300 dark:bg-amber-950/30 dark:text-amber-200 dark:border-amber-800"> <i data-lucide="circle-alert" class="inline-block w-4 h-4 shrink-0" aria-hidden="true"></i> <div class="flex flex-col gap-1 min-w-0 flex-1"> <h5 class="font-medium leading-none tracking-tight">Warning</h5> <div class="text-sm leading-relaxed [&_p]:leading-relaxed">This action cannot be undone.</div> </div> </div> <div role="alert" aria-live="assertive" aria-atomic="true" class="relative w-full rounded-md border p-4 flex items-start gap-3 [&>i]:translate-y-0.5 [&>i]:shrink-0 bg-sky-50 text-sky-800 border-sky-300 dark:bg-sky-950/30 dark:text-sky-200 dark:border-sky-800"> <i data-lucide="info" class="inline-block w-4 h-4 shrink-0" aria-hidden="true"></i> <div class="flex flex-col gap-1 min-w-0 flex-1"> <h5 class="font-medium leading-none tracking-tight">Info</h5> <div class="text-sm leading-relaxed [&_p]:leading-relaxed">Here's some helpful information.</div> </div> </div></div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="flex flex-col gap-4 max-w-lg"> <%= render(UI::Alert.new) do |alert| %> <% alert.with_title { "Default" } %> <% alert.with_description { "This is a default alert with important information." } %> <% end %> <%= render(UI::Alert.new(variant: :success)) do |alert| %> <% alert.with_title { "Success" } %> <% alert.with_description { "Your changes have been saved successfully." } %> <% end %> <%= render(UI::Alert.new(variant: :destructive)) do |alert| %> <% alert.with_title { "Destructive" } %> <% alert.with_description { "There was a problem with your request." } %> <% end %> <%= render(UI::Alert.new(variant: :warning)) do |alert| %> <% alert.with_title { "Warning" } %> <% alert.with_description { "This action cannot be undone." } %> <% end %> <%= render(UI::Alert.new(variant: :info)) do |alert| %> <% alert.with_title { "Info" } %> <% alert.with_description { "Here's some helpful information." } %> <% end %></div>No notes provided.
No params configured.