Toast

Here are examples!
<div style="height: 400px; overflow: auto; background-color: rgba(0,0,0,.1); position: relative;">
  <!-- toast.blade.php -->
  <div class="c-toast c-toast--top-right" style="position: absolute;" data-component="toast">
    <!-- toast__item.blade.php -->
    <!-- notice.blade.php -->
    <div class="c-notice c-toast__item c-toast__item--dismissable c-toast__item--has-action c-notice--info" data-dismissable-notice="1" data-dismissable-notice-uid="32ad8f803cda63259ccb40e4508c846e"
    data-dismissable-notice-timeout="immediate" id="id_6aaefc126192e" data-component="notice" aria-labelledby="notice__text__id_6aaefc126192e">
      <span class="c-notice__icon"><!-- icon.blade.php --></span> <span id="notice__text__id_6aaefc126192e" data-js-notice-message="true" class="c-notice__message">This message has an action button
      and may be dismissed, it will not dissapear automatically.</span>
      <div class="c-notice__actions">
        <div class="c-notice__action">
          <a class="c-button c-notice__button c-button__basic c-button__basic--default c-button--sm" href="#" target="_top" aria-label="Go to home" data-component="button"><span class=
          "c-button__label"><span class="c-button__label-text">Go to home</span></span></a>
        </div>
        <div class="c-notice__dismiss">
          <button class="c-button c-notice__dismiss c-button__basic c-button__basic--default c-button--sm c-button--icon-only" data-dismissable-notice-trigger="1" aria-label="Close" type="button"
          data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
           </span></span></button>
        </div>
      </div>
    </div><!-- toast__item.blade.php -->
    <!-- notice.blade.php -->
    <div class="c-notice c-toast__item c-toast__item--dismissable c-notice--info" data-dismissable-notice="1" data-dismissable-notice-uid="0d977edad4c33bbd44f4942ab858107f"
    data-dismissable-notice-timeout="immediate" id="id_6aaefc1261fdd" data-component="notice" aria-labelledby="notice__text__id_6aaefc1261fdd">
      <span class="c-notice__icon"><!-- icon.blade.php --></span> <span id="notice__text__id_6aaefc1261fdd" data-js-notice-message="true" class="c-notice__message">This message may be dismissed, it
      will not dissapear automatically.</span>
      <div class="c-notice__actions">
        <div class="c-notice__dismiss">
          <button class="c-button c-notice__dismiss c-button__basic c-button__basic--default c-button--sm c-button--icon-only" data-dismissable-notice-trigger="1" aria-label="Close" type="button"
          data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
           </span></span></button>
        </div>
      </div>
    </div><!-- toast__item.blade.php -->
    <!-- notice.blade.php -->
    <div class="c-notice c-toast__item c-toast__item--has-action c-notice--info" id="id_6aaefc1262325" data-component="notice" aria-labelledby="notice__text__id_6aaefc1262325">
      <span class="c-notice__icon"><!-- icon.blade.php --></span> <span id="notice__text__id_6aaefc1262325" data-js-notice-message="true" class="c-notice__message">This has a button to do a task but
      no dismiss action and will have double the time for hidden.</span>
      <div class="c-notice__actions">
        <div class="c-notice__action">
          <a class="c-button c-notice__button c-button__basic c-button__basic--default c-button--sm" href="#" target="_top" aria-label="Undo" data-component="button"><span class=
          "c-button__label"><span class="c-button__label-text">Undo</span></span></a>
        </div>
      </div>
    </div><!-- toast__item.blade.php -->
    <!-- notice.blade.php -->
    <div class="c-notice c-toast__item c-notice--info" id="id_6aaefc12625f2" data-component="notice" aria-labelledby="notice__text__id_6aaefc12625f2">
      <span class="c-notice__icon"><!-- icon.blade.php --></span> <span id="notice__text__id_6aaefc12625f2" data-js-notice-message="true" class="c-notice__message">This neither has a button, or a
      dismiss and will be hidden first.</span>
    </div>
  </div>
</div>

Here are examples!


<div style="height: 400px; overflow: auto; background-color: rgba(0,0,0,.1); position: relative;">
    @toast(['position' => 'top-right', 'attributeList' => ['style' => 'position: absolute;']])
       
        @toast__item([
            'type' => 'info',
            'message' => [
                'text' => 'This message has an action button and may be dismissed, it will not dissapear automatically.',
            ],
            'action' => [
                'text' => 'Go to home',
                'url' => '#'
            ],
            'dismissable' => 'immediate',
            'icon' => [
                'name' => 'check',
                'size' => 'md',
                'color' => 'white'
            ]
        ])
        @endtoast__item

        @toast__item([
            'type' => 'info',
            'message' => [
                'text' => 'This message may be dismissed, it will not dissapear automatically.',
            ],
            'dismissable' => 'immediate',
            'icon' => [
                'name' => 'check',
                'size' => 'md',
                'color' => 'white'
            ]
        ])
        @endtoast__item

        @toast__item([
            'type' => 'info',
            'message' => [
                'text' => 'This has a button to do a task but no dismiss action and will have double the time for hidden.',
            ],
            'action' => [
                'text' => 'Undo',
                'url' => '#'
            ],
            'icon' => [
                'name' => 'check',
                'size' => 'md',
                'color' => 'white'
            ]
        ])
        @endtoast__item


        @toast__item([
            'type' => 'info',
            'message' => [
                'text' => 'This neither has a button, or a dismiss and will be hidden first.',
            ],
            'icon' => [
                'name' => 'check',
                'size' => 'md',
                'color' => 'white'
            ]
        ])
        @endtoast__item
    @endtoast

</div>