Fluxbit ViewComponents
x
1
2
3
4
5
6
7
8
<div id="alert-gjmamdlrvqzdkvxfxmrhrnwjgyrxey" role="alert" class="text-blue-800 border-blue-300 bg-blue-50 dark:text-blue-400 dark:border-blue-800 rounded-lg border-2 flex p-4 mb-4 dark:bg-gray-800"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class=" pencil w-4 h-4">
  <path d="M21.731 2.269a2.625 2.625 0 0 0-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 0 0 0-3.712ZM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 0 0-1.32 2.214l-.8 2.685a.75.75 0 0 0 .933.933l2.685-.8a5.25 5.25 0 0 0 2.214-1.32L19.513 8.2Z"></path>
</svg>
<div class="ml-3 text-sm font-medium">Alert with icon!</div>
<button aria-label="Close" data-dismiss-target="#alert-gjmamdlrvqzdkvxfxmrhrnwjgyrxey" type="button" class="ml-auto -mx-1.5 -my-1.5 rounded-lg focus:ring-2 p-1.5 inline-flex justify-center h-8 w-8 dark:bg-gray-800 bg-blue-50 text-blue-500 focus:ring-blue-400 hover:bg-blue-200 dark:text-blue-400 dark:hover:bg-gray-700"><span class="sr-only">Dismiss</span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="w-5 h-5">
    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path>
  </svg>
</button></div>
1
2
3
4
5
<%= fx_alert(
  icon: 'heroicons_solid:pencil:w-4 h-4',
  with_content: "Alert with icon!",
  dismiss_timeout: 0
) %>

No notes provided.

No params configured.