Alerts
Displays customizable alerts to attract attention and provide critical actions.
Demo
Create an element with the .alert class. Wrap the alert in a Svelte #if statement to
hide it or make it visible.
Sections
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 class="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>Animation
Svelte Transitions can provide smooth transition animations when the alert state changes.
<aside class="alert" transition:fade|local={{ duration: 200 }}>(content)</aside>