Alerts

Svelte Component

Display customizable alerts to garner attention and provide critical actions.

@skeletonlabs/skeleton
Source Code
View Page Source

Examples

Getting Started

This component makes use of role="alert" and aria-live="polite".

typescript 
let visible: boolean = true;
html 
<Alert {visible}>
	<svelte:fragment slot="lead">(icon)</svelte:fragment>
	<svelte:fragment slot="title">(title)</svelte:fragment>
	<span>(message)</span>
	<svelte:fragment slot="trail">(trail)</svelte:fragment>
</Alert>

Styling

Use the background and border properties to style your alert.

html 
<Alert background="bg-primary-500/20" border="border border-primary-500">...</Alert>