Demo
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
<div class="flex items-center w-full max-w-xs p-4 text-body bg-neutral-primary-soft rounded-base shadow-xs border border-default bg-blue-50 border-blue-200" role="alert">
  <div class="inline-flex items-center justify-center shrink-0 w-8 h-8 text-blue-500 bg-blue-100 rounded-lg dark:bg-blue-800 dark:text-blue-200">
  <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
    <path d="M15.147 15.085a7.159 7.159 0 0 1-6.189 3.307A6.713 6.713 0 0 1 3.1 15.444c-2.679-4.513.287-8.737.888-9.548A4.373 4.373 0 0 0 5 1.608c1.287.953 6.445 3.218 5.537 10.5 1.5-1.122 2.706-3.01 2.853-6.14 1.433 1.049 3.993 5.395 1.757 9.117Z"/>
  </svg>
</div>
  <div class="ms-3 text-sm font-normal">Custom styled toast.</div>
    
    <button
type="button"
class="
        ms-auto flex items-center justify-center text-body
        hover:text-heading bg-transparent box-border border
        border-transparent hover:bg-neutral-secondary-medium focus:ring-4
        focus:ring-neutral-tertiary font-medium leading-5 rounded text-sm
        h-8 w-8 focus:outline-none
      "
aria-label="Close"
>
      <svg
class="w-3 h-3"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 14 14"
>
        <path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
/>
      </svg>
    </button>
</div>
1
render(Flowbite::Toast.new(message: "Custom styled toast.", class: ["bg-blue-50", "border-blue-200"]))

Add custom classes to the toast container.

No params configured.