Alert

Setup

<script>
	import { Alert } from 'svelte-5-ui-lib';
</script>

Interactive Alert Bilder

&lt;script&gt;
    import { Alert } from "svelte-5-ui-lib";
  &lt;/script&gt;

<Alert
   dismissable
>
    My Alert
  </Alert>

Alert with list

Ensure that these requirements are met:

At least 10 characters (and up to 100 characters)
At least one lowercase character
Inclusion of at least one special character, e.g., ! @ # ?

<script lang="ts">
	import { Alert } from 'svelte-5-ui-lib';
	import { InfoCircleSolid } from 'flowbite-svelte-icons';
</script>

<div class="mb-4">
	<Alert color="blue" class="!items-start">
		{#snippet icon()}
			<InfoCircleSolid class="h-5 w-5" />
		{/snippet}
		<p class="font-medium">Ensure that these requirements are met:</p>
		<ul class="ms-4 mt-1.5 list-inside list-disc">
			<li>At least 10 characters (and up to 100 characters)</li>
			<li>At least one lowercase character</li>
			<li>Inclusion of at least one special character, e.g., ! @ # ?</li>
		</ul>
	</Alert>
</div>

Additional content

This is a info alert

More info about this info alert goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

<script lang="ts">
	import { Alert, Button } from 'svelte-5-ui-lib';
	import { InfoCircleSolid, EyeSolid } from 'flowbite-svelte-icons';
</script>

<div class="mb-4">
	<Alert color="blue" class="!items-start">
		{#snippet icon()}
			<InfoCircleSolid class="mt-1 h-5 w-5" />
		{/snippet}
		<p class="text-lg font-medium">This is a info alert</p>
		<p class="mt-2 mb-4 text-sm">
			More info about this info alert goes here. This example text is going to run a bit longer so
			that you can see how spacing within an alert works with this kind of content.
		</p>
		<div class="flex gap-2">
			<Button size="xs"><EyeSolid class="me-2 h-4 w-4" />View more</Button>
			<Button size="xs" outline>Go to Home</Button>
		</div>
	</Alert>
</div>

Custom color

Your content

<script lang="ts">
	import { Alert } from 'svelte-5-ui-lib';
</script>

<Alert dismissable class="bg-sky-500 text-white dark:bg-lime-500 dark:text-white"
	>Your content</Alert
>

Event

Close me

<script lang="ts">
	import { Alert } from 'svelte-5-ui-lib';
	let alertEventStatus = $state(true);
	function handleClose() {
		// console.log('Alert dismissed');
		alert('Alert dismissed');
		alertEventStatus = false;
	}
</script>

<Alert dismissable onclick={handleClose} bind:alertStatus={alertEventStatus}>Close me</Alert>