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_6ac984b826f53" data-component="notice" aria-labelledby="notice__text__id_6ac984b826f53">
      <span class="c-notice__icon"><!-- icon.blade.php -->
       <span class="c-icon c-icon--check c-icon--material c-icon--material-check c-icon--svg-material c-icon--color-white c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-label=
      "Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
      "fill:var(--icon-color, currentColor)">
      <path d="M382 720 154 492 211 435 382 606 749 239 806 296Z"></path></svg></span></span> <span id="notice__text__id_6ac984b826f53" 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 class="c-icon c-icon--close c-icon--material c-icon--material-close c-icon--svg-material c-icon--size-sm" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
          "Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
          "fill:var(--icon-color, currentColor)">
          <path d="M256 760 200 704 424 480 200 256 256 200 480 424 704 200 760 256 536 480 760 704 704 760 480 536Z"></path></svg></span></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_6ac984b8277c8" data-component="notice" aria-labelledby="notice__text__id_6ac984b8277c8">
      <span class="c-notice__icon"><!-- icon.blade.php -->
       <span class="c-icon c-icon--check c-icon--material c-icon--material-check c-icon--svg-material c-icon--color-white c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-label=
      "Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
      "fill:var(--icon-color, currentColor)">
      <path d="M382 720 154 492 211 435 382 606 749 239 806 296Z"></path></svg></span></span> <span id="notice__text__id_6ac984b8277c8" 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 class="c-icon c-icon--close c-icon--material c-icon--material-close c-icon--svg-material c-icon--size-sm" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
          "Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
          "fill:var(--icon-color, currentColor)">
          <path d="M256 760 200 704 424 480 200 256 256 200 480 424 704 200 760 256 536 480 760 704 704 760 480 536Z"></path></svg></span></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_6ac984b827bf0" data-component="notice" aria-labelledby="notice__text__id_6ac984b827bf0">
      <span class="c-notice__icon"><!-- icon.blade.php -->
       <span class="c-icon c-icon--check c-icon--material c-icon--material-check c-icon--svg-material c-icon--color-white c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-label=
      "Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
      "fill:var(--icon-color, currentColor)">
      <path d="M382 720 154 492 211 435 382 606 749 239 806 296Z"></path></svg></span></span> <span id="notice__text__id_6ac984b827bf0" 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_6ac984b827f68" data-component="notice" aria-labelledby="notice__text__id_6ac984b827f68">
      <span class="c-notice__icon"><!-- icon.blade.php -->
       <span class="c-icon c-icon--check c-icon--material c-icon--material-check c-icon--svg-material c-icon--color-white c-icon--size-md" role="img" data-nosnippet="" translate="no" aria-label=
      "Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
      "fill:var(--icon-color, currentColor)">
      <path d="M382 720 154 492 211 435 382 606 749 239 806 296Z"></path></svg></span></span> <span id="notice__text__id_6ac984b827f68" 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>