Alerts

Tailwind

Display customizable alerts to garner attention and provide critical actions.

@skeletonlabs/skeleton
Source Code
View Page Source

Examples

Getting Started

Create an element with the .alert class. Wrap in a Svelte if statement to handle the visible state.

ts 
let visible: boolean = true;
html 
{#if visible}
    <aside class="alert">
        <!-- Icon -->
        <div>(icon)</div>
        <!-- Message -->
        <div class="alert-message">
            <h3>(title)</h3>
            <p>{message}</p>
        </div>
        <!-- Actions -->
        <div class="alert-actions">(buttons)</div>
    </aside>
{/if}

Message Content

Use the .alert-message to create a vertical set of text information that fills the available width of the alert.

html 
<div class="alert-message">
	<h3>(title)</h3>
	<p>{message}</p>
</div>
html 
<h3 class="alert-message">(title)</h3>

Action Buttons

Use the .alert-actions to create a trailing area to house interactive action buttons.

html 
<div class="alert-actions">(buttons)</div>

Using Variants

The alert will use warning colors by default. Append the .alert-[color] variant adjust the color styles.

html 
<div class="alert alert-primary">...</div>

Adding Animations

Svelte Transitions can provide smooth transitions when the alert state changes.

html 
<aside class="alert" transition:fade|local={{ duration: 200 }}>...</div>