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
<div class="flex flex-col gap-4 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="5000" 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">Default</p> <p class="text-sm opacity-90" data-ui--toast-target="description">Heads up, something happened.</p> </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 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-emerald-600 dark:[&>i]:text-emerald-400" role="status" aria-live="polite" data-controller="ui--toast" data-ui--toast-duration-value="5000" data-action="mouseenter->ui--toast#pause mouseleave->ui--toast#resume" data-state="open" data-slot="toast"><i data-lucide="circle-check" 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">Success</p> <p class="text-sm opacity-90" data-ui--toast-target="description">Your changes have been saved.</p> </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 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-destructive" role="alert" aria-live="assertive" data-controller="ui--toast" data-ui--toast-duration-value="5000" data-action="mouseenter->ui--toast#pause mouseleave->ui--toast#resume" data-state="open" data-slot="toast"><i data-lucide="circle-alert" 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">Destructive</p> <p class="text-sm opacity-90" data-ui--toast-target="description">There was a problem with your request.</p> </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 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-amber-600 dark:[&>i]:text-amber-400" role="status" aria-live="polite" data-controller="ui--toast" data-ui--toast-duration-value="5000" data-action="mouseenter->ui--toast#pause mouseleave->ui--toast#resume" data-state="open" data-slot="toast"><i data-lucide="circle-alert" 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">Warning</p> <p class="text-sm opacity-90" data-ui--toast-target="description">This action cannot be undone.</p> </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 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-sky-600 dark:[&>i]:text-sky-400" role="status" aria-live="polite" data-controller="ui--toast" data-ui--toast-duration-value="5000" 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">Info</p> <p class="text-sm opacity-90" data-ui--toast-target="description">Here's some helpful information.</p> </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="flex flex-col gap-4 max-w-sm"> <%= render(UI::Toast.new(variant: :default, title: "Default", description: "Heads up, something happened.")) %> <%= render(UI::Toast.new(variant: :success, title: "Success", description: "Your changes have been saved.")) %> <%= render(UI::Toast.new(variant: :destructive, title: "Destructive", description: "There was a problem with your request.")) %> <%= render(UI::Toast.new(variant: :warning, title: "Warning", description: "This action cannot be undone.")) %> <%= render(UI::Toast.new(variant: :info, title: "Info", description: "Here's some helpful information.")) %></div>No notes provided.
No params configured.