Ready to get started?

Join Adocasts Plus for $8.00/mo or sign into your account to get access to all of our lessons.

robot mascot smiling

Dismissible & Self Destructing Alerts

In this lesson, we'll focus on adding interactivity to our alerts by making them both conditionally dismissible and self-destructable.

Dec 11, 23
3m 44s

Developer, dog lover, and burrito eater. Currently teaching AdonisJS, a fully featured NodeJS framework, and running Adocasts where I post new lessons weekly. Professionally, I work with JavaScript, .Net C#, and SQL Server.


Burlington, KY

Lastly, for our alerts, let’s add in a little interactivity. In this lesson, we’re going to make our alerts:

  • Dismissible, meaning that if we click a close button the alert should go away.

  • Self-destructible, meaning that after a defined time the alert should remove itself.

Making Our Alerts Dismissible

First, let’s conditionally make our alerts dismissible. Since our AlpineJS state for this is going to be pretty simple, and we’ll want to derive the default value from our component’s props, I’m going to define the x-data within EdgeJS and pass it into AlpineJS as a string.

// resources/views/components/alert/index.edge

@set('variant', variant ?? 'light')
@set('variants', variants ?? {
  light: `bg-white text-neutral-900`,
  dark: `bg-black text-neutral-100`,
  blue: `border-transparent bg-blue-600 text-white`,
  red: `border-transparent bg-red-600 text-white`,
  green: `border-transparent bg-green-500 text-white`,
  yellow: `border-transparent bg-yellow-500 text-white`,

@set('slots', { ...$slots, ...$props.$slots })
++@set('data', {
++  show: show ?? true,
++  dismissible: dismissible ?? false,

++  x-data="{{ stringify(data) }}"
++  x-show="show"
  class="{{ variants[variant] }} relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] {{ slots.icon ? 'pl-11' : '' }}">

    @if (slots.icon)
      {{{ await slots.icon() }}}

    @if (title || slots.title)
      <h5 class="mb-1 font-medium leading-none tracking-tight">
        @if (title)
          {{ title }}
          {{{ await slots.title() }}}
        Alert Message Headline

    @set('mainSlot', await slots.main())
    @if (message || mainSlot)
      <div class="text-sm opacity-70">
        @if (message)
          {{ message }}
          {{{ mainSlot }}}
        This is the subtext for your alert message, providing important information or instructions.

Ready to get started?

Join Adocasts Plus for $8.00/mo or sign into your account to get access to all of our lessons.

Join The Discussion! (0 Comments)

Please sign in or sign up for free to join in on the dicussion.

robot comment bubble

Be the first to Comment!