Alerts
TailwindDisplay customizable alerts to garner attention and provide critical actions.
Stylesheets
Package
Source
Doc
Examples
Getting Started
Create an element with the .alert class. Wrap in a Svelte if statement to handle the visible state.
let visible: boolean = true;{#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.
<div class="alert-message">
<h3>(title)</h3>
<p>{message}</p>
</div><h3 class="alert-message">(title)</h3>Action Buttons
Use the .alert-actions to create a trailing area to house interactive action buttons.
<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.
<div class="alert alert-primary">...</div>Adding Animations
Svelte Transitions can provide smooth transitions when the alert state changes.
<aside class="alert" transition:fade|local={{ duration: 200 }}>...</div>