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-uid="6a0be84b4c12a" 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_6a0be84b4bb1d" data-uid="6a0be84b4bb41" data-component="notice" aria-labelledby="notice__text__id_6a0be84b4bb1d">
<span class="c-notice__icon">
<!-- icon.blade.php -->
<span class="c-icon c-icon--check c-icon--material c-icon--material-check material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--color-white c-icon--size-md" data-material-symbol="check" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="6a0be84b4bcc3" data-component="icon">
</span>
</span>
<span id="notice__text__id_6a0be84b4bb1d" 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-uid="6a0be84b4bd58" data-component="button">
<span class="c-button__label"> <span class="c-button__loader"></span>
<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-uid="6a0be84b4bda7" data-component="button">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" aria-hidden="false" data-material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a0be84b4bde7" data-component="icon">
</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_6a0be84b4be6c" data-uid="6a0be84b4be7c" data-component="notice" aria-labelledby="notice__text__id_6a0be84b4be6c">
<span class="c-notice__icon">
<!-- icon.blade.php -->
<span class="c-icon c-icon--check c-icon--material c-icon--material-check material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--color-white c-icon--size-md" data-material-symbol="check" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="6a0be84b4beb4" data-component="icon">
</span>
</span>
<span id="notice__text__id_6a0be84b4be6c" 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-uid="6a0be84b4bef3" data-component="button">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" aria-hidden="false" data-material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a0be84b4bf33" data-component="icon">
</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_6a0be84b4bf99" data-uid="6a0be84b4bfa4" data-component="notice" aria-labelledby="notice__text__id_6a0be84b4bf99">
<span class="c-notice__icon">
<!-- icon.blade.php -->
<span class="c-icon c-icon--check c-icon--material c-icon--material-check material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--color-white c-icon--size-md" data-material-symbol="check" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="6a0be84b4bfd5" data-component="icon">
</span>
</span>
<span id="notice__text__id_6a0be84b4bf99" 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-uid="6a0be84b4c013" data-component="button">
<span class="c-button__label"> <span class="c-button__loader"></span>
<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_6a0be84b4c073" data-uid="6a0be84b4c07d" data-component="notice" aria-labelledby="notice__text__id_6a0be84b4c073">
<span class="c-notice__icon">
<!-- icon.blade.php -->
<span class="c-icon c-icon--check c-icon--material c-icon--material-check material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--color-white c-icon--size-md" data-material-symbol="check" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="6a0be84b4c0ae" data-component="icon">
</span>
</span>
<span id="notice__text__id_6a0be84b4c073" 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>
