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="69f0d17abe219" 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_69f0d17abdb9f" data-uid="69f0d17abdbb9" data-component="notice" aria-labelledby="notice__text__id_69f0d17abdb9f">
<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="69f0d17abdd45" data-component="icon">
</span>
</span>
<span id="notice__text__id_69f0d17abdb9f" 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="69f0d17abdde5" 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="69f0d17abde38" 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="69f0d17abde7d" 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_69f0d17abdefd" data-uid="69f0d17abdf0f" data-component="notice" aria-labelledby="notice__text__id_69f0d17abdefd">
<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="69f0d17abdf51" data-component="icon">
</span>
</span>
<span id="notice__text__id_69f0d17abdefd" 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="69f0d17abdf99" 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="69f0d17abdfd8" 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_69f0d17abe04b" data-uid="69f0d17abe056" data-component="notice" aria-labelledby="notice__text__id_69f0d17abe04b">
<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="69f0d17abe090" data-component="icon">
</span>
</span>
<span id="notice__text__id_69f0d17abe04b" 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="69f0d17abe0d8" 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_69f0d17abe14f" data-uid="69f0d17abe15a" data-component="notice" aria-labelledby="notice__text__id_69f0d17abe14f">
<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="69f0d17abe194" data-component="icon">
</span>
</span>
<span id="notice__text__id_69f0d17abe14f" 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>
