Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
<div class="max-w-sm">
<div class="relative flex w-full items-start gap-3 rounded-lg border bg-popover p-4 text-popover-foreground shadow-lg pointer-events-auto duration-300 fill-mode-forwards data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-bottom-2 [&>i]:translate-y-0.5 [&>i]:shrink-0 [&>i]:text-muted-foreground" role="status" aria-live="polite" data-controller="ui--toast" data-ui--toast-duration-value="0" data-action="mouseenter->ui--toast#pause mouseleave->ui--toast#resume" data-state="open" data-slot="toast"><i data-lucide="info" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i>
<div class="flex-1 min-w-0 space-y-1">
<p class="text-sm font-semibold leading-none" data-ui--toast-target="title">Update available</p>
<div class="mt-2"> <button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background disabled:pointer-events-none disabled:bg-muted! disabled:text-muted-foreground! bg-primary text-primary-foreground hover:bg-primary/90 h-8 rounded-md px-3 text-xs disabled:cursor-not-allowed" aria-busy="false">Reload</button>
</div>
</div>
<button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background disabled:pointer-events-none disabled:text-muted-foreground! disabled:bg-transparent! h-7 w-7 disabled:cursor-not-allowed shrink-0 -m-1 text-current/70 hover:text-current hover:bg-current/10" aria-label="Dismiss" data-action="click->ui--toast#dismiss"><i data-lucide="x" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i>
</button>
</div>
</div>
1
2
3
4
5
6
7
<div class="max-w-sm">
<%= render(UI::Toast.new(variant: :default, title: "Update available", duration: 0)) do |toast| %>
<% toast.with_action do %>
<%= render(UI::Button.new(size: :sm)) { "Reload" } %>
<% end %>
<% end %>
</div>