x
1
2
3
4
5
6
7
8
9
10
<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" data-controller="ui--alert"> <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">Update available</h5> <div class="text-sm leading-relaxed [&_p]:leading-relaxed">A new version of the application is ready to install.</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! hover:bg-accent hover:text-accent-foreground disabled:bg-transparent! h-7 w-7 disabled:cursor-not-allowed shrink-0 -mr-1 -mt-1" aria-label="Close alert" data-action="click->ui--alert#dismiss"> <i data-lucide="x" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i> </button></div>1
2
3
4
render(UI::Alert.new(variant: :info, dismissible: true)) do |alert| alert.with_title { "Update available" } alert.with_description { "A new version of the application is ready to install." }endNo notes provided.
No params configured.