Toast

Get the users attention with a toast!

Basic

Here are examples!

Warning: The parameter "isShortcode" is not recognized in the component "notice" in /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php on line 253

Warning: The parameter "name" is not recognized in the component "icon" in /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php on line 253
This message has an action button and may be dismissed, it will not dissapear automatically.

Go to home

Warning: The parameter "name" is not recognized in the component "icon" in /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php on line 253
This message may be dismissed, it will not dissapear automatically.

Warning: The parameter "name" is not recognized in the component "icon" in /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php on line 253
This has a button to do a task but no dismiss action and will have double the time for hidden.

Undo

Warning: The parameter "name" is not recognized in the component "icon" in /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php on line 253
This neither has a button, or a dismiss and will be hidden first.

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="68b86c691b9da">
    <!-- toast__item.blade.php -->
    <br />
<b>Warning</b>:  The parameter <b>"isShortcode"</b> is not recognized in the component <b>"notice"</b> in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>253</b><br />
<!-- 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_68b86c691b395" data-uid="68b86c691b3ae" aria-labelledby="notice__text__id_68b86c691b395">
    
    
            <span class="c-notice__icon">
                <br />
<b>Warning</b>:  The parameter <b>"name"</b> is not recognized in the component <b>"icon"</b> in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>253</b><br />
<!-- 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="68b86c691b525">
                    </span>
        </span>
        
    
    
    
            <span id="notice__text__id_68b86c691b395" 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" target="_top" href="#" target="_top" aria-label="Go to home" data-uid="68b86c691b5a9">   
     <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" target="_top" data-dismissable-notice-trigger="1" aria-label="Close" type="button" data-uid="68b86c691b5f9">   
     <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="68b86c691b635">
                    </span>
            </span>
        
        
    </span> </button>                </div>
                    </div>
    </div>
            <!-- toast__item.blade.php -->
    <br />
<b>Warning</b>:  The parameter <b>"isShortcode"</b> is not recognized in the component <b>"notice"</b> in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>253</b><br />
<!-- 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_68b86c691b6d1" data-uid="68b86c691b6e1" aria-labelledby="notice__text__id_68b86c691b6d1">
    
    
            <span class="c-notice__icon">
                <br />
<b>Warning</b>:  The parameter <b>"name"</b> is not recognized in the component <b>"icon"</b> in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>253</b><br />
<!-- 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="68b86c691b733">
                    </span>
        </span>
        
    
    
    
            <span id="notice__text__id_68b86c691b6d1" 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" target="_top" data-dismissable-notice-trigger="1" aria-label="Close" type="button" data-uid="68b86c691b774">   
     <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="68b86c691b7a3">
                    </span>
            </span>
        
        
    </span> </button>                </div>
                    </div>
    </div>
            <!-- toast__item.blade.php -->
    <br />
<b>Warning</b>:  The parameter <b>"isShortcode"</b> is not recognized in the component <b>"notice"</b> in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>253</b><br />
<!-- notice.blade.php -->
<div class="c-notice c-toast__item c-toast__item--has-action c-notice--info" id="id_68b86c691b817" data-uid="68b86c691b822" aria-labelledby="notice__text__id_68b86c691b817">
    
    
            <span class="c-notice__icon">
                <br />
<b>Warning</b>:  The parameter <b>"name"</b> is not recognized in the component <b>"icon"</b> in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>253</b><br />
<!-- 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="68b86c691b869">
                    </span>
        </span>
        
    
    
    
            <span id="notice__text__id_68b86c691b817" 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" target="_top" href="#" target="_top" aria-label="Undo" data-uid="68b86c691b8a6">   
     <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 -->
    <br />
<b>Warning</b>:  The parameter <b>"isShortcode"</b> is not recognized in the component <b>"notice"</b> in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>253</b><br />
<!-- notice.blade.php -->
<div class="c-notice c-toast__item c-notice--info" id="id_68b86c691b915" data-uid="68b86c691b91f" aria-labelledby="notice__text__id_68b86c691b915">
    
    
            <span class="c-notice__icon">
                <br />
<b>Warning</b>:  The parameter <b>"name"</b> is not recognized in the component <b>"icon"</b> in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>253</b><br />
<!-- 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="68b86c691b966">
                    </span>
        </span>
        
    
    
    
            <span id="notice__text__id_68b86c691b915" 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>

Blade component parameters

Key	Default value	Type	Available values	Description
position	bottom-left	string	-	Position of the toast: top-left, top-right, bottom-left, bottom-right.
id		string	-	The DOM id of the component.
classList	[]	array	-	Array containing wrapping classes array
attributeList	[]	array	-	Array containing keys and values rendered as attributes
containerAware	false	boolean	true/false	Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component.

Settings location: /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/Toast/toast.json