Toast

Toasts are available as a web component using the skin-toast tag.

Attributes:

id: Unique ID (required if dismissible)
data-hide-duration: Duration (in minutes) to keep the toast hidden after dismissed (optional)
data-hide-transition: Duration (in milliseconds) of the dismissal transition, 250 by default (optional)
data-icon: Any valid skin-icon name (optional)
data-location: Location of the toast appearance in the window (optional)
data-location-id: Unique ID for the generated toast container (can be used to programmatically show toast, optional)
data-style: Alternate style (optional)

Valid locations include:

tl: Top left
tr: Top right
bl: Bottom left
br: Bottom right

Valid styles include:

bt: 4px top border
br: 4px right border
bb: 4px bottom border
bl: 4px left border

Examples

This is an unstyled toast

This is a custom toast with a bl style applied

This is a default styled toast with bl style applied

This is an informational toast with bt style applied

This is a warning toast

This is an error toast

This is a success toast

Example toast shown by button click


                
                <!-- Unstyled -->
<skin-toast
        class="mb-6"
        data-icon="megaphone">
    This is an unstyled toast
</skin-toast>

<!-- Custom -->
<skin-toast
        class="tu-bg-default border-0 border-theme-primary mb-6"
        data-icon="megaphone"
        data-style="bl">
    This is a custom toast with a <code>bl</code> style applied
</skin-toast>

<!-- Default -->
<skin-toast
        id="skin-toast-default"
        class="tc-style-default mb-6"
        data-hide-duration="0"
        data-icon="megaphone"
        data-style="bl">
    This is a default styled toast with <code>bl</code> style applied
</skin-toast>

<!-- Info -->
<skin-toast
        class="tc-style-info-light mb-6"
        data-icon="information-circle"
        data-style="bt">
    This is an informational toast with <code>bt</code> style applied
</skin-toast>

<!-- Warning -->
<skin-toast
        class="tc-style-warning-light mb-6"
        data-icon="exclamation-triangle">
    This is a warning toast
</skin-toast>

<!-- Error -->
<skin-toast
        class="tc-style-error-light mb-6"
        data-icon="x-circle">
    This is an error toast
</skin-toast>

<!-- Success -->
<skin-toast
        class="tc-style-success-light mb-6"
        data-icon="check-circle">
    This is a success toast
</skin-toast>

<!-- Show on click -->
<button class="tc-btn tc-style-default"
        data-show="toast-show"
        data-show-duration="3000">
    Show toast
</button>

<skin-toast
        class="tc-style-primary opacity-90"
        data-icon="megaphone"
        data-location="br"
        data-location-id="toast-show">
    Example toast shown by button click
</skin-toast>

Programmatic toast

Toasts can be created programmatically using the Skin.Toast.create function.


        
        <skin-toast-container id="example-toast-container" data-style="br"></skin-toast-container>

<button
        type="button"
        id="toast-btn"
        class="tc-btn tc-style-default">Create toast
</button>

<script src="./path/to/skin.js"></script>

<script>

    let toastBtn = document.getElementById("toast-btn");

    toastBtn.addEventListener('click', () => {

        Skin.Toast.create({
            containerId: "example-toast-container",
            classes: "tc-style-success",
            innerHTML: "This is an example toast"
        });

    });

</script>