Alert

Setup

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

Interactive Alert Bilder

<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="mb-4 mt-2 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>