• Components
  • Alert

Alert

12 unread messages. Tap to see.
@!jrmc.alert({ text: '12 unread messages. Tap to see.' })
<div class="alert" >
  <span></span>    <span>12 unread messages. Tap to see.</span></div>

Alert with icon

12 unread messages. Tap to see.
@jrmc.alert({ text: '12 unread messages. Tap to see.' })
  @slot('icon')
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current flex-shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
  @end
@end
<div class="alert" >
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current flex-shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>    <span>12 unread messages. Tap to see.</span></div>

Alert info

New software update available.
@!jrmc.alert.info({ text: 'New software update available.' })
<div class="alert alert-info" >
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current flex-shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>    <span>New software update available.</span></div>

Alert success

Your purchase has been confirmed!
@!jrmc.alert.success({ text: 'Your purchase has been confirmed!' })
<div class="alert alert-success" >
        <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>    <span>Your purchase has been confirmed!</span></div>

Alert warning

Warning: Invalid email address!
@!jrmc.alert.warning({ text: 'Warning: Invalid email address!' })
<div class="alert alert-warning" >
        <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>    <span>Warning: Invalid email address!</span></div>

Alert error

Error! Task failed successfully.
@!jrmc.alert.error({ text: 'Error! Task failed successfully.' })
<div class="alert alert-error" >
        <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>    <span>Error! Task failed successfully.</span></div>

Alert with actions

we use cookies for no reason. 
@jrmc.alert({ text: 'we use cookies for no reason.' })
  @slot('actions')
    @!jrmc.button({ text: "ghost", class: "btn-ghost btn-sm" })
    @!jrmc.button({ text: "primary", class: "btn-primary btn-sm" })
  @end
@end
<div class="alert" >
  <span></span>    <span>we use cookies for no reason.</span>    <div><button  class="btn btn-ghost btn-sm">
  ghost
</button>
<button  class="btn btn-primary btn-sm">
  primary
</button></div></div>

Alert with title and description

New message!

You have 1 unread message
@jrmc.alert()
  @slot('main')
    <h3 class="font-bold">New message!</h3>
    <div class="text-xs">You have 1 unread message</div>
  @end
  @slot('actions')
    @!jrmc.button({ text: "see", class: "btn-sm" })
  @end
@end
<div class="alert" >
  <span></span>    <div>    <h3 class="font-bold">New message!</h3>
    <div class="text-xs">You have 1 unread message</div></div>    <div><button  class="btn btn-sm">
  see
</button></div></div>