Toast

The Toast component provides a reusable pattern for toast in the interface.

Basic

Basic toast examples.

Here are examples!

This message has an action button and may be dismissed, it will not dissapear automatically.

Go to home

This message may be dismissed, it will not dissapear automatically.

This has a button to do a task but no dismiss action and will have double the time for hidden.

Undo

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="6a44f157bbaa5" 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_6a44f157baf33" data-uid="6a44f157baf55" data-component="notice" aria-labelledby="notice__text__id_6a44f157baf33">
      <span class="c-notice__icon"><!-- icon.blade.php --></span> <span id="notice__text__id_6a44f157baf33" 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="6a44f157bb1f8" 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-uid="6a44f157bb26b" 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_6a44f157bb39f" data-uid="6a44f157bb3b3" data-component="notice" aria-labelledby="notice__text__id_6a44f157bb39f">
      <span class="c-notice__icon"><!-- icon.blade.php --></span> <span id="notice__text__id_6a44f157bb39f" 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="6a44f157bb473" 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_6a44f157bb57d" data-uid="6a44f157bb58b" data-component="notice" aria-labelledby=
    "notice__text__id_6a44f157bb57d">
      <span class="c-notice__icon"><!-- icon.blade.php --></span> <span id="notice__text__id_6a44f157bb57d" 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="6a44f157bb651" 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_6a44f157bb6fe" data-uid="6a44f157bb70c" data-component="notice" aria-labelledby="notice__text__id_6a44f157bb6fe">
      <span class="c-notice__icon"><!-- icon.blade.php --></span> <span id="notice__text__id_6a44f157bb6fe" 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>

API

Parameter	Default	Description
position	bottom-left	Position of the toast: top-left, top-right, bottom-left, bottom-right.

Subcomponents

Child components for toast, including purpose and supported Blade parameters.

Toast Item

Blade directive: @toast__item()

Type of notice: success, warning, danger, info.

Parameter	Default	Type	Purpose
type	info	string	Type of notice: success, warning, danger, info.
message	[]	array\|object	An array with two parameters: title and text
icon	false	array	The icon according to the @icon component.
stretch	false	boolean	If true, the notice will stretch to the full width of the viewport.
dismissable	false	boolean\|string	If not false, the notice will have a close button. Allowed trueish values: immediate (show notice on reload), session (show notice at next visit, default), permanent (show notice when local storage is wiped).
action	false	array\|boolean	An array with three parameters: label (text), url and position (aside\|below).
classList	[]	array	Additional CSS classes added to the wrapping element.
attributeList	[]	array	Additional HTML attributes added to the wrapping element.

@toast__item([
    'type' => 'info',
    'message' => [
        'title' => false,
        'text' => false,
    ],
    'icon' => false,
    'stretch' => false,
    'dismissable' => false,
    'action' => false,
])
@endtoast__item

CSS API

Variable	Default	Type	Values	Description
--c-toast--base	var(--base)	range	-	Main unit that drives radius and spacing scales.

Similar components

Tabs Tags Tooltip